1.实验过程
- Dom 结构
<div class="a">
A
<div class="b">
B
<div class="c">
C
<div class="d">
D
</div>
</div>
</div>
</div>
- Js 脚本
<script type="text/javascript">
$(function(){
$('.a').on('click', '.c', function(event) {
alert('a on c');
});
$('.a').on('click','.d' function(event) {
alert('a on d');
});
});
</script>
- Css 样式
<style type="text/css">
.a{background:#f00;width:500px;height:500px;font-size:50px;color:#fff;text-align:center;margin:0 auto;}
.b{background:#0f0;width:400px;height:400px;font-size:50px;color:#fff;text-align:center;margin:0 auto;}
.c{background:#00f;width:300px;height:300px;font-size:50px;color:#fff;text-align:center;margin:0 auto;}
.d{background:#f0f;width:200px;height:200px;font-size:50px;color:#fff;text-align:center;margin:0 auto;}
</style>
- 绑定组合
A on C 后 ,A on D 先
A on C 后 ,B on C 先
A on C 后 , B on D 先
A on D 后 ,B on C 先
A on D 后 ,B on D 先
B on C 后 , B on D 先
2.实验结果
- 结论
jquery —> 父同子近先,父异(子同或不同)父近先。都与顺序无关
zepto —> 父同子异顺序先,父异(子同或不同)父近先(与子顺序无关)。
3.分析结果
Zepto.js
Paste_Image.pngjQuery.js Paste_Image.png Paste_Image.png
- 结论
zepto.js 的事件委托:
在代码解析的时候,所有document的所有 click 委托事件都依次放入一个队列里,click 的时候先看当前元素是不是.a,符合就执行,然后查看是不是.b,符合就执行。
jquery.js 的事件委托:
document上委托了2个 click 事件,click 后判断是否当前符合条件(选择符),然后把事件拿出来执行。
网友评论