Fork me on GitHub

JS事件模型

发表于 | 分类于 |
字数统计: 1k | 阅读时长 ≈ 3 min

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

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

  1. dom0中，一个dom对象只能注册一个同类型的函数，因为注册多个同类型的函数的话，就会发生覆盖，之前注册的函数就会无效。
1
2
3
4
5
6
7
8
9
10
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;
  1. 在DOM2级中使用addEventListener和removeEventListener来注册和解除事件（IE8及之前版本不支持）。

这种函数较之前的方法好处是一个dom对象可以注册多个相同类型的事件，不会发生事件的覆盖，会依次的执行各个事件函数。

1
2
3
4
5
6
7
8
9
//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
10
11
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元素。

在此过程中，浏览器都会检测针对该事件的捕捉事件监听器，并且运行这件事件监听器。

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

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

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

参考

https://www.cnblogs.com/Leesoo/p/6892204.html

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

-------------完结撒花 -------------