87,910
社区成员
发帖
与我相关
我的任务
分享jquery事件执行顺序问题？
<div id="all">
<div id="outter" style="height:200px;width:200px;background-color:#000000;position:relative">
<div id="inner" style="height:100px;width:100px;background-color:red;margin:0 auto;position:relative;top:25%">
</div>
</div>
<div>
$('#all').on('click',function(e){
//alert('id:'+e.target.id);
alert("all")
});
$('#all').on("click","#outter",function(e){
//alert('id-outter:'+e.target.id)
alert('outter')
});
$('#all').on("click","#inner",function(e){
//alert('id-inner:'+e.target.id)
alert('inner');
});
$('#all').on其实是在#all这个selector上绑定事件。按照我的代码流程，$('#all')上绑定3个事件，其childSelector分别为#outter,#inner和本身。
当我点击inner部分的div时，由于事件冒泡，那么3个函数的alert部分都会弹出。
点击inner的div时，事件冒泡到div.#all，由于div.#all绑定了3个事件，那么div.#all的3个事件能被触发，但这个触发的顺序是怎么控制的，根据实际测试的结果分别弹出的是inner，outter，all。这里我就不明白了。我觉得相对于#all，绑定事件的3个childselector不应该是同级的么（都为子节点）？为什么执行顺序不是all，outter，inner?他是怎么根据事件触发对象相对于div.#all的层次关系的顺序来触发绑定事件的呢？
不知道我描述清楚了没有，我的疑问就是，div.#all的事件中的childSelector指定3个不同层次的对象。根据测算结果发现3个事件的执行顺序是根据childSelector的子节点->父节点的顺序在处理。如果说事件是直接绑定到各自不同的子节点上我能够理解。但现在都是绑定在公用的一个父节点上，而现在却还能按照childSelect子节点->父节点的顺序在执行。难道事件本身还要根据事件源（e.target），与childSelector的相对关系，在重新排序事件的执行顺序？
...全文
请发表友善的回复…
发表回复
jiezi316 2016-02-05
- 打赏
- 举报
另外还有很多例子的比如如下
<div id="all">
<div id="outter">
<div id="inner"></div>
</div>
</div>
$('#all').on('click','#inner',function(e){alert('inner')});
$('#outter').on('click'',function(e){alert('outter')});
当点击inner的div时，可以发现，先提示的是outter然后才是inner，所以selector.on这个selector才是真正绑定事件的对象。里面的childSelector只是在selector的事件触发是，然后根据触发对象来做的一个类似于“分发”的处理。
jiezi316 2016-02-05
- 打赏
- 举报
这个不是等价的，一个是绑定在#all，一个是绑定在#all #inner上的事件。
有很多例子可以说明。比如$('#all').on("click","#inner",function(e) 绑定的事件，你无法用$('#inner').off掉
另外你也可以用_data函数，获取到事件的列表，可以看到#all上有3个事件，而#inner上一个事件也没有。
我觉得9楼说的对，是jquery在触发时有过特殊的处理。根据冒泡的顺序进行了处理。
jiezi316 2016-02-04
- 打赏
- 举报
如果我事件是绑定到了#inner或者#outter上。我觉得可以理解，但我的事件全是绑定在#all上的。按照我的理解。触发流程应该应该这样：
点击#inner->触发#inner的事件（未绑定事件）->触发#outter的事件（未绑定事件）->触发#all的事件（发现绑定了3个事件）->按照某种顺序执行所绑定的3个事件。
不晓得我理解得对不对了？
Go 旅城通票 2016-02-04
- 打赏
- 举报
其实就是冒泡问题，你的包含关系不就是all>outer>inner，你点击inner实际也点击了outer，如果你inner没有事件也会除非outer-》all，你绑定了就执行
天际的海浪 2016-02-04
- 打赏
- 举报
你这样理解本来应该是对的，但这样一来就违背了事件冒泡的规则。会给我们带来许多不便。
因为
$('#all').on("click","#inner",function(e){
就应该等价于
$('#all #inner').on("click",function(e){
所a以a在jquery中a特a意a做a了a处a理，特意模拟成事件绑定在#inner或者#outter上的事件冒泡顺序
天际的海浪 2016-02-04
- 打赏
- 举报
特意拟成事件绑定在#inner或者#outter上的事件冒泡顺序
天际的海浪 2016-02-04
- 打赏
- 举报
你这样理解本来应该是对的，但这样一来就违背了事件冒泡的规-则。会给我们带来许多不.便。
因为
$('#all').on("click","#inner",function(e){
就应该等.价于
$('#all #inner').on("click",function(e){
天雷舞风hehe 2016-02-04
- 打赏
- 举报
<!DOCTYPE>
<html>
<body>
<div id="all">
<div id="outter" style="height:200px;width:200px;background-color:#000000;position:relative">
<div id="inner" style="height:100px;width:100px;background-color:red;margin:0 auto;position:relative;top:25%">
123
</div>
</div>
</div>
<script src="./jquery-2.1.4.js"></script>
<script>
function alert(a) {
console.log(a);
}
$('#all').on('click', function (e) {
//alert('id:'+e.target.id);
alert('all')
});
$('#all').on("click", "#outter", function (e) {
//alert('id-outter:'+e.target.id)
alert('all-outter')
});
$('#all').on("click", "#inner", function (e) {
//alert('id-inner:'+e.target.id)
alert('all-inner');
});
$('#outter').click(function () {
alert('outter');
})
$('#outter').on("click", "#inner", function (e) {
//alert('id-inner:'+e.target.id)
alert('outer-inner');
});
$('#inner').click(function (e) {
alert('inner');
})
</script>
</body>
</html>
天雷舞风hehe 2016-02-04
- 打赏
- 举报
顺序是：
1 判断自身有无监听自身的事件 $('#inner').click(function () { alert('this'); }),这个最先执行
2 将该事件传递上去，有可能它的父节点在监听(非冒泡),即触发$('#all').on("click","#inner",function(e){alert('inner')});
3 冒泡，继续执行父元素的1,2
xuzuning 2016-02-04
- 打赏
- 举报
$('#all').on("click","#inner",function(e){
等价于
$('#all #inner').on("click",function(e){
怎么能说是 全是绑定在#all上的？
