1、事件传播机制、阻止传播、取消默认事件、事件代理这些到底是什么呢？
①事件传播机制：
JS事件传播包括三个阶段：
-
捕获阶段：简单来说就是从最顶层元素，逐渐进入dom内部，查找目标元素的过程。过程中依次执行各个元素绑定在捕获阶段的事件(不包括目标元素上的事件)
-
处于目标阶段：到达目标元素，按事件注册顺序执行绑定在目标元素上的事件
-
冒泡阶段：从目标元素，依次像外层元素冒泡，最后到达顶层元素的过程。依次执行各个元素绑定在冒泡阶段的事件(不包括目标元素上的事件)
②阻止传播：即阻止事件进一步的捕获或者冒泡，使事件不在向后传播。可以使用事件对象e（e的介绍在我的博客JS DOM（2）的第6点中已经介绍）的stopPropagation()设置在事件的相应阶段。
举个列子：列子代码地址
列子中嵌套了3个div（div#outer =》 div#middle =》div#inner）。给每个div都绑定了捕获阶段和冒泡阶段的事件。
（1）首先测试捕获阶段设置阻止事件传播。把div#middle的捕获阶段的代码改成如下：
middle.addEventListener("click", function(e){
e.stopPropagation();
console.log("middle捕获");
}, true);
点击div#inner，出现如下结果，可见div#middle的捕获阶段后面的事件都不执行了，事件被阻止传播了
"outer捕获"
"middle捕获"
（2）接着测试在处于目标阶段设置阻止事件传播。在div#inner的冒泡阶段事件中设置阻止事件传播（目标元素的事件执行是按照注册顺序执行，和冒泡捕获无关，我的div#inner的冒泡事件是设置在捕获事件的前面的，正常不阻止事件传播的话，会先输出"inner冒泡"，在输出"inner捕获"）
inner.addEventListener("click", function(e){
e.stopPropagation();
console.log("inner冒泡");
}, false);
点击div#inner，结果如下：☆此时尤其需要注意☆，处于目标阶段的所有事件都会被执行完
"outer捕获"
"middle捕获"
"inner冒泡"
"inner捕获"
（3）最后测试冒泡阶段设置阻止事件传播。在div#middle的冒泡阶段设置阻止事件传播
middle.addEventListener("click", function(e){
e.stopPropagation();
console.log("middle冒泡");
}, false);
点击div#inner，结果如下：可见div#middle的冒泡阶段后面的事件都不执行了，事件被阻止传播了
"outer捕获"
"middle捕获"
"inner冒泡"
"inner捕获"
"middle冒泡"
③取消默认事件：
对于一些元素是有默认事件的，比如点击a链接可以实现跳转。又比如表单中，点击input类型为submit的按钮会默认提交表单。
那么如何取消这些默认事件呢？
事件对象e中有个preventDefault()方法，给这些具有默认事件的元素重新绑定事件，并且在里面设置e.preventDefault()就可以取消默认事件了
还是以代码为例：
<a href="http://baid.com">baidu</a>
<script>
document.querySelector('a').onclick = function(e){
e.preventDefault()
console.log(this.href)
if(/baidu.com/.test(this.href)){
location.href = this.href
}
}
</script>
<form action="/login">
<input type="text" name="username" placeholder="login">
<input type="submit" value="login">
</form>
<script>
document.querySelector('form').addEventListener('submit', function(e){
e.preventDefault()
if(document.querySelector('input[name=username]').value === 'login'){
this.submit()
}
})
</script>
④事件代理：
事件代理是利用事件的冒泡原理来实现的。当我们需要对很多元素添加事件的时候，可以为每个元素都绑定事件。也可以给他们的父节点绑定事件。因为事件冒泡，当点击子节点的时候，事件会冒泡传播到父节点，触发设置在父节点上的事件。这就是事件代理，委托它们父级代为执行事件。
为什么要用事件代理?
假设有100个li，每个li都有相同的click点击事件，如果用for循环的方法，来遍历所有的li，然后给它们添加事件，需要添加100事件。每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了。而且每次增加或删除具有相同事件的li都需要重新绑定或者解除事件。
如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。而且每次增加或删除需要有相同事件的li不需要做额外操作。
那么如何在父节点的事件中获取到具体点击的是哪个子节点呢？
Event对象提供了一个属性叫target，e.target可以返回事件的目标节点。e.target.nodeName可以获取具体是什么标签名，这个返回的是大写的（比如"LI"）
以下代码事例加深理解
事例实现了：
- 当点击按钮开头添加时在<li>这里是</li>元素前添加一个新元素，内容为用户输入的非空字符串；当点击结尾添加时在最后一个 li 元素后添加用户输入的非空字符串.
- 当点击每一个元素li时控制台展示该元素的文本内容。
代码地址
事例中点击每一个元素li时控制台展示该元素的文本内容就是通过事件代理实现的，无论增加或删除li都不需要再做额外的事件绑定或解除
网友评论