jquery on方法(事件委托)

jquery绑定事件处理函数的方法有好几个,比如:bind(),on(),delegate(),live()。

其中delegate和live都是用on实现的,效果也类似,live好像在1.7版本中已经废弃了。

这里重点看看on的用法:

$(el).on( events [, selector ] [, data ], handler(eventObject) )

如果省略了selector参数,on方法和bind方法效果一样。

 

如果传递了参数selector,其实就生成了一个“事件委托”。

什么是“事件委托”呢?

我们知道浏览器事件触发时经历了两个过程:事件捕获 和 事件冒泡。

事件捕获是指事件从document到触发事件的目标对象(event.target)的过程;

事件冒泡是指从触发事件的目标对象(event.target)到document的过程。

所以,点击一个元素的时候,除了会触发该元素的click事件,也会冒泡触发其祖先元素的click事件(包括document)。

利用这一特性,我们可以直接在一个元素(比如document)上绑定一个事件处理函数来处理该元素所有子孙元素的该事件,当然,这里一般会在处理函数里判断event.target,根据触发事件的目标对象不同进行不同的操作。这一过程就叫事件委托。

 

on方法传递了参数selector时就构成了一个上面这样的事件委托,关于selector参数的介绍jquery文档中描述的不是很清楚,看网上很多文章关于这块都理解的有点偏差,所以写代码测试了一下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery on方法</title>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
<div style="position:relative;width:800px;height:600px;margin:0 auto;background-color:lightblue;">
    <div id="middle" style="position:absolute;top:50%;left:50%;width:600px;height:400px;margin:-200px 0 0 -300px;background-color:blue;">
        <div id="inter" style="position:absolute;top:50%;left:50%;width:400px;height:200px;margin:-100px 0 0 -200px;background-color:darkblue;">
            <div id="innter" style="position:absolute;top:50%;left:50%;width:200px;height:100px;margin:-50px 0 0 -100px;background-color:black;">

            </div>
        </div>
    </div>
</div>


<script>
$(function(){
    $("div").on(
        "click",
        "#inter",
        {o1:hi,o2:jquery},
        function(e){
            console.log(this,e.data);
            //e.stopPropagation();
        }
    );
});
</script>
</body>
</html>

测试用例中用了4个嵌套的div,用on方法给div元素绑定click事件的处理函数,其中selector参数传递的为“#inter”,点击#outer和#middle时没有结果输出,当点击#inter或#innter时执行结果都为:

根据事件冒泡的顺序和div的层数我们可以分析出每次的两行输出都是#middle和#outer两个div的click事件处理函数执行的结果。

 

综合分析得出:

如果on方法传递了selector参数(且不为null),只有当selector是el的子孙元素,且触发事件的元素是selector或者selector的子孙元素时,才会触发绑定在el上的事件处理函数。

 

最后顺便一提,取消用on绑定的事件处理函数的方法是off()。

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。