几天前, 群上忽然有人提出一个问题, 如下:
- <div class="parent">
- <div class="child"></div>
- </div>
- Windows.onload = function() {
- let parent = document.querySelector('.parent');
- let child = document.querySelector('.child');
- parent.addEventListener('click', function() {
- console.log(1);
- }, true);
- parent.addEventListener('click', function() {
- console.log(2);
- });
- child.addEventListener('click', function() {
- console.log(4);
- });
- child.addEventListener('click', function() {
- console.log(3);
- }, true);
- }
考虑到事件流是先捕获后冒泡, 我毫不犹豫地说是 1342. 那对了吗?
看一下输出结果:
image.PNG
现在我点一下中间的 div:
image.PNG
结果是 1432. 当我们的事件绑定在非目标元素时 (这里的 parent), 它是按照事件流的顺序来的, 而目标元素的事件执行顺序确是按照代码的书写顺序来的. 下面把代码顺序换一下:
- child.addEventListener('click', function() {
- console.log(3);
- }, true);
- child.addEventListener('click', function() {
- console.log(4);
- });
现在再次点击 child:
image.PNG
顺序换过来了.
然而, 如果要兼容 iE8 及以下, 只能使用 attachEvent 来绑定事件, 虽然也可以绑定多个事件, 但是事件的执行顺序确是与代码顺序相反.
来源: http://www.jianshu.com/p/9cc57f31e426