dom事件流

发表于 | 分类于

HTML 事件可以是浏览器行为，也可以是用户行为。
事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

一、javascript中有两种事件模型：DOM0，DOM2。

  1. dom0中，一个dom对象只能注册一个同类型的函数，因为注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    		var click = document.getElementById('click');
    		click.onclick = function(){
      		  alert('you click the first function');
    		};
    		click.onclick = function(){
        		alert('you click the second function')
    		}
    		//解除事件
    		document.getElementById('click'_).onclick = null;
    	``` 

    2. 在DOM2级中使用addEventListener和removeEventListener来注册和解除事件（IE8及之前版本不支持）。这种函数较之之前的方法好处是一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数。
    	```javascript
    		//addEventListener('事件名称','事件回调','捕获/冒泡')；
    		var click = document.getElementById('inner');
        		click.addEventListener('click',function(){
            		alert('click one');
        		},false);
        		click.addEventListener('click',function(){
            		alert('click two');
    		},false);

addEventListenr的第一个参数是事件名称，与DOM0级不同的是没有”on“，另外第三个参数代表捕获还是冒泡，true代表捕获事件，false代表冒泡事件。

  1. 正常的情况下，我们在不添加stopPropagation函数时，首先应该执行inner，然后执行outer，但是当我们在inner的事件函数中添加了stopPropagation函数之后，执行完inner的事件函数之后，就不会在执行outer的事件函数了，也可以理解为事件冒泡到inner之后就消失了，因此也就不会在执行接下来的事件函数了。
    由于事件捕获阶段没有可以阻止事件的函数，所以一般都是设置为事件冒泡。 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    var click = 	document.getElementById('inner');
     	 var clickouter = document.getElementById('outer');
      	click.addEventListener('click',function(event){
          	alert('inner show');
         	 event.stopPropagation();
     	 },false);
     	 clickouter.addEventListener('click',function(){
          	alert('outer show');
     	 },false);

二、DOM事件流

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素结点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程可称为DOM事件流。
DOM标准同时支持两种事件模型，即捕获型事件与冒泡型事件，但是，捕获型事件先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到window对象）。
例如：标准的事件转送模式。

  1. 在事件捕捉（Capturing）阶段，事件将沿着DOM树向下转送，目标节点的每一个祖先节点，直至目标节点。例如，若用户单击了一个超链接，则该单击事件将从document节点转送到html元素，body元素以及包含该链接的p元素。
    在此过程中，浏览器都会检测针对该事件的捕捉事件监听器，并且运行这件事件监听器。

  2. 在目标（target）阶段，浏览器在查找到已经指定给目标事件的事件监听器之后，就会运行 该事件监听器。目标节点就是触发事件的DOM节点。例如，如果用户单击一个超链接，那么该链接就是目标节点（此时的目标节点实际上是超链接内的文本节点）。

  3. 在冒泡（Bubbling）阶段，事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点到document节点。该过程中的每一步。浏览器都将检测那些不是捕捉事件监听器的事件监听器，并执行它们。

    所有的事件都要经过捕捉阶段和目标阶段，但是有些事件会跳过冒泡阶段。例如，让元素获得输入焦点的focus事件以及失去输入焦点的blur事件就都不会冒泡。

参考

https://www.cnblogs.com/Leesoo/p/6892204.html
https://www.cnblogs.com/liugang-vip/p/5616484.html