jQuery 多个事件处理程序绑定到一个元素时的优先级
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8779657/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Priority when more than one event handler is bound to an element
提问by user1032531
When more than one event handler is bound to an element, how is it determined which one is triggered first?
当多个事件处理程序绑定到一个元素时，如何确定首先触发哪个事件处理程序？
<script>
$(function(){
$(".li").find('input').click(function(){alert('li>input');});
$(".li").click(function(){alert('li');});
$('input').click(function(){alert('input');});
});
</script>
</head>
<body>
<ul>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
<li class="li"><input type="checkbox" /><span>Hello</span></li>
</ul>
</body>
采纳答案by jfriend00
If two event handlers are bound to the exact same object, it would be first come, first serve. The first one attached will execute first.
如果两个事件处理程序绑定到完全相同的对象，那么它将是先到先得。第一个附加的将首先执行。
But, your example looks a bit different. It looks like you also have one event bound to the inputobject and others to the parent liobject. In that case, the one where the event actually originated (presumably the inputelement in this case) will occur first and then the event will bubble up to the parent objects and they will occur later.
但是，您的示例看起来有点不同。看起来您还有一个事件绑定到input对象，而其他事件绑定到父li对象。在这种情况下，事件实际起源的事件（input在这种情况下可能是元素）将首先发生，然后事件将向上冒泡到父对象，它们将在稍后发生。
If you want to stop the bubbling up to the parents, you can use jQuery's event.stopPropagation()and the event will not reach the parents and never trigger their event handlers. That would look like this:
如果你想阻止冒泡到父母，你可以使用 jQueryevent.stopPropagation()并且事件不会到达父母并且永远不会触发他们的事件处理程序。那看起来像这样：
$('input').click(function(e) {
e.stopPropagation();
alert('input');
});
Per the jQuery documentation for stopPropagation(), it does not stop other event handlers on the same object, only event handlers on parent objects that would normally get the event via bubbling up the parent tree.
根据 jQuery 文档stopPropagation()，它不会停止同一对象上的其他事件处理程序，只会停止通常通过向上冒泡父树来获取事件的父对象上的事件处理程序。
You can see the difference here: http://jsfiddle.net/jfriend00/L33aq/
你可以在这里看到区别：http: //jsfiddle.net/jfriend00/L33aq/
回答by David Lin
I want to point out that the "First come, first serve" rule is not always true, it also depends on how you register a handler:
我想指出“先到先得”规则并不总是正确的，它还取决于您如何注册处理程序：
Handler1 - $(document).on('click', 'a', function....)
Handler2 - $('a').on('click', function....)
This the above example, the Handler 2 is always called before the handler1.
这是上面的例子，处理程序 2 总是在处理程序 1 之前调用。
Have a look at this fiddle: http://jsfiddle.net/MFec6/
看看这个小提琴：http: //jsfiddle.net/MFec6/
回答by karim79
First come, first serve. The first one bound will be the first one triggered, and so on...
先到先得。第一个绑定将是第一个触发的，依此类推...
Related: jQuery event handlers always execute in order they were bound - any way around this?
