Javascript事件监听器 - 射击命令

时间:2015-08-06 09:38:22

标签: javascript jquery javascript-events

如果一个元素附加了多个事件侦听器,那么执行的顺序将基于事件绑定的位置/时间(从上到下位于代码中)。保证,100%的时间?

或者是否存在任何“随机性”。那么在同一个元素上混合使用jQuery和vanilla事件监听器呢?

3 个答案:

答案 0 :(得分:2)

(假设您正在讨论相同的事件类型和元素)事件处理程序将按照处理程序注册的顺序执行。当您处理jQuery句柄或javascript处理程序(捕获阶段在冒泡之前运行)时,这是真的,而不是混合。

当你有混合处理程序时,jQuery会在第一次尝试为一个元素注册一个类型的处理程序时添加一个vanila处理程序,所以它将按顺序遵循vanilla处理程序的顺序(但所有的jQuery处理程序)将在触发jQuery自己的本机处理程序时执行)

var el = document.getElementById('clickme');

el.addEventListener('click', function() {
  snippet.log('o - 1');
});
el.addEventListener('click', function() {
  snippet.log('o - 2');
});

$('#clickme').click(function() {
  snippet.log('jq - 1(o -3)')
});
el.addEventListener('click', function() {
  snippet.log('o - 4');
});
$('#clickme').click(function() {
  snippet.log('jq - 2')
});
$('#clickme').click(function() {
  snippet.log('jq - 3')
});
el.addEventListener('click', function() {
  snippet.log('o - 5');
});
el.addEventListener('click', function() {
  snippet.log('o - 6');
});
$('#clickme').click(function() {
  snippet.log('jq - 4')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<button id="clickme">This is for testing</button>

答案 1 :(得分:1)

这是一个非常有用的EventListeners讨论。我曾多次尝试使用语法,例如......

element.addEventListener("event", callFunction(this.val))

我有很多问题可以很好地融入单独的功能。如果可能,最好将功能直接链接到事件。即

element.event = function() { /* enter your function contents */ };

但是,我记得为什么你不能在任何场合都能做到这一点的可能原因。也许在事件中,您正在调用一个尚未被脚本定义或定位的元素。

答案 2 :(得分:0)

历史上有两种行为模式。

Netscape说,element1上的事件首先发生。这称为事件捕获。

Microsoft坚持认为element2上的事件优先。这称为事件冒泡。

现在,您可以通过设置|取消设置AddEventListener的最后一个参数来决定使用哪一个(从上到下或从下到上):

element1.addEventListener('click',doSomething2,true);
element2.addEventListener('click',doSomething,false);

如果最后一个参数为true,则为捕获阶段设置事件处理程序,如果为false,则为冒泡阶段设置事件处理程序。

Herehere一切都得到了完美的解释。