js事件冒泡和事件捕获总结

js事件冒泡和事件捕获总结

一、总结

一句话总结：

DOM事件标准定义了两种事件流：捕获和冒泡，冒泡是由下（当前节点）到上（根节点），捕获是由上（根节点）到下（当前节点），

1、事件捕获和事件冒泡？

事件冒泡：【当前节点到根元素】-【stopPropagation()阻止冒泡】：当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次

事件捕获：【根元素到当前节点】：事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。

2、如何设置事件捕获还是事件冒泡？

addEventListener('', function(e) {}, false)：第三个参数可控制事件是冒泡还是捕获，true是事件捕获，false是事件冒泡

3、为什么会有事件捕获和事件冒泡？

【Netscape选择实现了捕获事件流，微软则实现了冒泡事件流】：和许多Web技 术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。

和许多Web技 术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的 是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。

二、js事件传播：冒泡与捕获

转自或参考：js事件监听机制(事件捕获)总结
https://blog.csdn.net/wuyou1336/article/details/56928738

DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技 术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的 是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。
默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。


冒泡事件流
当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它 遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从W3C标准的浏览器里可以通 过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。即从被点击的元素到此元素的祖先元素直至根元素，从下到上。


捕获事件流
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档 根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何 元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM节点再进行冒泡。即根元素到被点击的元素，从上到下。

三、js事件冒泡和事件捕获 实例

转自或参考：js事件冒泡、事件捕获
https://www.cnblogs.com/frogblog/p/10274035.html

事件冒泡

        var box = document.querySelector('.box');
	var content = document.querySelector('.content');
	document.addEventListener('click', function(e) {
	  console.log('document');
	}, false);
	document.body.addEventListener('click', function(e) {
	  console.log('body');
	}, false);
	box.addEventListener('click', function(e) {
	  console.log('box');
	}, false);
	content.addEventListener('click', function(e) {
	  console.log('content');
	}, false);
	    

当我们点击.content时，事件的执行顺序是content - box - body - document。所以事件冒泡的走向是由子节点向父节点去触发同名事件

事件捕获

        var box = document.querySelector('.box');
	var content = document.querySelector('.content');
	document.addEventListener('click', function(e) {
	  console.log('document');
	}, true);
	document.body.addEventListener('click', function(e) {
	  console.log('body');
	}, true);
	box.addEventListener('click', function(e) {
	  console.log('box');
	}, true);
	content.addEventListener('click', function(e) {
	  console.log('content');
	}, true);
	    

当我们点击.content时，事件的执行顺序是document - body - box - content。所以事件冒泡的走向是由父节点向子节点去触发同名事件

设置事件捕获还是事件冒泡：

addEventListener('', function(e) {}, false);

第三个参数可控制事件是冒泡还是捕获，js逻辑写法的先后顺序与事件触发的顺序无关