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时执行结果都为:

aaarticlea/png;base64,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" alt="" />

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

综合分析得出:

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

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

上一篇:jQuery mouseove和mouseout事件不断触发


下一篇:Genral log(普通日志)与 Slow log(慢速日式)