事件流
1.事件的捕获阶段
2.事件的目标阶段
3.事件的冒泡阶段
事件有三个阶段，首先发生的是捕获阶段，然后是目标阶段，最后才是冒泡阶段，对于捕获和冒泡，我们只能干预其中的一个，通常来说，我们可能会干预事件冒泡阶段，而不去干预事件捕获阶段。
1、事件捕获
事件捕获是火狐浏览器提出来的，IE678不支持事件捕获（基本上，我们都是用事件冒泡）事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递
2、目标阶段
触发自己的事件
3、事件的冒泡阶段
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。
当我们触发了子元素的某个事件后，父元素对应的事件也会触发。
通常情况，事件冒泡对于我们来说是没有问题的，我们直接不管就行了，但是如果当事件冒泡给我们带来影响的时候，我们需要阻止事件冒泡。
如何阻止事件冒泡，event.stopPropagation();因为其有兼容性，
link.onclick = function (event) {
event = event || window.event;//兼容性
//stop :停止 propagation：传播
event.stopPropagation();
}
事件通过捕获——目标阶段——冒泡阶段，通过addEventListener（"事件字符串"，函数，false）参数中的第三个参数boolean，默认是false，控制是否是捕获型事件，默认冒泡流
事件从捕获阶段开始Document为false不读，html不读，body为true读取，再到div事件，进入冒泡阶段，body不读，html为true,document为true，事件的顺序是body，div，html最后是Document;
所以对于捕获和冒泡，我们只能干预其中的一个，尽量不干预捕获阶段.
委托事件，事件冒泡的运用给父元素注册事件，子元素触发事件的事件
通过父元素的事件找到当前点击的子元素
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
<li>44</li>
<li>55</li>
</ul>
<script>
var ul = document.querySelector("ul");//找ul对象
ul.onclick = function (e) { //注册点击父
元素事件
//如果我能够获取到我点击的那个li
var target = e.target || e.srcElement; //e.target:浏览器获取 e.srcElement:ie678
//e.target; 找到点击的那个li 点了谁就是谁
target.style.backgroundColor = "red";
}
</script>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
