javascript事件委托

作者 : 慕源网 本文共1106个字,预计阅读时间需要3分钟 发布时间: 2022-04-25 共148人阅读

javascript事件委托,上述所有按钮只有一个监听器。它是一个delegate()(委托),在父元素上调用。 当事件触发时,’this’是指发生事件的对象。

Head 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>  
<script type="application/x-javascript">  
$(function() {  
    $("#container").delegate("button", "click", function(index) {  
        paneToShow = "#" + $(this).text();  
        $(".content-pane").hide();  
        $(paneToShow).show();  
    });  
});  
</script>  
<style type="text/css">  
.content-pane {  
    display: none;  
    padding: 5px;  
    border: 2px solid #000;  
}  
</style> 

body 

<div id="container">  
    <h1>Click any button below...</h1>  
    <button id="first">First</button>  
    <button id="second">Second</button>  
    <button id="third">Third</button>  
    <button id="fourth">Fourth</button>  
    <div id="First" class="content-pane">  
        <h1>You clicked First Pane...</h1>  
    </div>  
    <div id="Second" class="content-pane">  
        <h1>You clicked Second Pane...</h1>  
    </div>  
    <div id="Third" class="content-pane">  
        <h1>You clicked Third Pane...</h1>  
    </div>  
    <div id="Fourth" class="content-pane">  
        <h1>You clicked Fourth Pane...</h1>  
    </div>  
</div> 

描述

javascript事件委托当事件触发时,’this’是指发生事件的对象。这种方法的优点是只有一个侦听器,占用的内存更少。如果需要,我可以将侦听器添加到各个按钮。缺点是计算如何获取有关单击元素的信息。幸运的是,jQuery将“this”分配给单击的元素,因此我们可以使用$(this)并将其视为普通的DOM元素。


慕源网 » javascript事件委托

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录