事件处理模型——事件冒泡、事件捕获
上一篇介绍了事件的绑定，我们这里先写一个三层div嵌套的结构并且给每一个div都加一个点击事件。
1.
2. .wrapper {
3. width: 200px;
4. height: 200px;
5. background-color: red;
6. }
7. .box {
8. width: 100px;
9. height: 100px;
10. background-color: green;
11. }
12.
13. .content {
14. width: 50px;
15. height: 50px;
16. background-color: black;
17. }
18.
1.
2. var wrapper = document.getElementsByClassName(‘wrapper’)[0],
3. box = document.getElementsByClassName(‘box’)[0],
4. content = document.getElementsByClassName(‘content’)[0];
5. wrapper.onclick = function () {
6. console.log(‘wrapper’);
7. }
8. box.onclick = function () {
9. console.log(‘box’);
10. }
11. content.onclick = function () {
12. console.log(‘content’);
13. }
现在我们点击最外层的wrapper，控制台打印的wrapper。
点击box，却打印出来box和wrapper
点击content打印出来content、box、wrapper
这个现象就是我们所说的事件冒泡。
什么叫冒泡？
在结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，子元素冒泡向父元素，结构上的自底向上。（这里的底是结构上的底，视觉上是自顶向下）
大部分事件都有事件冒泡现象，并且所有的浏览器都有事件冒泡。
结构上的冒泡，和视觉的位置没有关系，我们看一下三个方块视觉上分开的例子：
1.
2. .wrapper {
3. width: 200px;
4. height: 200px;
5. background-color: red;
6. position: absolute;
7. }
8. .box {
9. width: 100px;
10. height: 100px;
11. background-color: green;
12. position: absolute;
13. left: 200px;
14. top: 200px;
15. }
16.
17. .content {
18. width: 50px;
19. height: 50px;
20. background-color: black;
21. position: absolute;
22. left: 100px;
23. top: 100px;
24. }
我们点击content部分之后依然会把box和wrapper都打印出来。
并不是所有的事件都有冒泡，focus、blur、change、submit、reset、select等方法就没有事件冒泡现象。
事件捕获：
结构上（非视觉上）嵌套关系的元素，会存在事件捕获功能，即同一事件，自父元素捕获至子元素（事件源元素），结构上的自顶向下。
addEventListener最后一个参数就是是否开始事件捕获，当我们填true的时候，就代表开启了事件捕获。只要开启了事件捕获，就不会冒泡了，如果不捕获的话，就遵循事件冒泡。
因为addEventListener只有chrome有，因此事件捕获也只有chrome浏览器有。
依然是上面的那个例子：
1.
2. var wrapper = document.getElementsByClassName(‘wrapper’)[0],
3. box = document.getElementsByClassName(‘box’)[0],
4. content = document.getElementsByClassName(‘content’)[0];
5. wrapper.addEventListener(‘click’, function (e) {
6. console.log(‘wrapper’);
7. }, true);
8. box.addEventListener(‘click’, function (e) {
9. console.log(‘box’);
10. }, true);
11. content.addEventListener(‘click’, function (e) {
12. console.log(‘content’);
13. }, true);
现在点击content之后，顺序是wrapper、box、content。
当事件冒泡和事件捕获同时存在的时候，事件冒泡和事件捕获的触发顺序则为：先捕获，再冒泡。
1.
2. var wrapper = document.getElementsByClassName(‘wrapper’)[0],
3. box = document.getElementsByClassName(‘box’)[0],
4. content = document.getElementsByClassName(‘content’)[0];
5. wrapper.onclick = function () {
6. console.log(‘wrappeBubbler’);
7. }
8. box.onclick = function () {
9. console.log(‘boxBubble’);
10. }
11. content.onclick = function () {
12. console.log(‘contentBubble’);
13. }
14. wrapper.addEventListener(‘click’, function (e) {
15. console.log(‘wrapper’);
16. }, true);
17. box.addEventListener(‘click’, function (e) {
18. console.log(‘box’);
19. }, true);
20. content.addEventListener(‘click’, function (e) {
21. console.log(‘content’);
22. }, true);
结果是先捕获再冒泡。
但是当我们把捕获写到冒泡前面的时候，顺序好像发生了变化。
wrapper–>box–>contentBubble–>content–>boxBubble–>wrapperBubble
这里是因为点击content，并不属于冒泡，而是属于事件执行，我们先绑定的boxBubble，所以就先捕获，再事件执行，再冒泡，这与我们的结论没有冲突。
取消冒泡和阻止默认事件
有时候冒泡或者默认事件会对我们的功能造成影响，因此我们需要适时地取消冒泡和默认事件。
我们绑定事件的处理函数的时候，可以传递一个形参，代表我们的事件对象，一般是e或者event，系统会自动帮我们捕获事件源对象并且把事件源对象传入。
取消冒泡的方法
1.w3c标准方法：event.stopPropagation()
1.
2. var wrapper = document.getElementsByClassName(‘wrapper’)[0],
3. box = document.getElementsByClassName(‘box’)[0],
4. content = document.getElementsByClassName(‘content’)[0];
5. content.onclick = function (e) {
6. console.log(‘content’);
7. e.stopPropagation();
8. }
现在我们点击content之后就没有冒泡了，但是点击box还是有冒泡的，因为我们没有取消box的冒泡。
IE9以及以下的版本不支持这个方法。
2.event.cancelBubble = true
这个属性是IE的，不过一些高版本的浏览器也有这个属性，只要让这个属性的值等于true，同样也可以取消事件冒泡。
封装一个兼容性的取消事件冒泡的方法：
1.
2.
3. function stopBubble(event) {
4. if(event.stopPropagation) {
5. event.stopPropagation();
6. }else {
7. event.cancelBubble = true;
8. }
9. }
默认事件
当我们在浏览器中点击右键，会弹出一个菜单，这就是一个默认事件contextmenu。还有a标签，即使我们不写跳转的页面，也会自动刷新页面，这也是一个默认事件。
移动端的默认事件更多。
默认事件有好的也有不好的，这就需要我们把不需要的默认事件阻止掉。
阻止默认事件
1.return false
我们只要在处理函数最后写上 return false就可以阻止默认事件了。
1.
2. document.oncontextmenu = function () {
3. console.log(‘menu’);
4. return false;
5. }
现在我们在页面上右键就不会出现菜单了。
不过要注意的是，这种写法只能用在句柄方式绑定的事件上。
2.e.preventDefault()
1.
2. documet.addEventListener(‘contextmenu’, function (e) {
3. console.log(‘menu’);
4. e.preventDefault();
5. },false);
这是w3c标准的阻止默认事件的方法，句柄也同样可以使用。
不过IE9以下不兼容。
3.e.returnValue = false
这个是IE的方法，事件源对象上的属性returnValue代表是否有默认事件，直接返回false就可以阻止默认事件了。现在高版本的浏览器也有这个属性。
1.
2. document.attachEvent(‘oncontextmenu’, function (e) {
3. e.returnValue = false;
4. });
现在我们也可以封装一个兼容性的阻止默认事件的方法了：
1.
2. function cancelHandler(event) {
3. if(event.preventDefault) {
4. event.preventDefault();
5. }else{
6. event.returnValue = false;
7. }
8. }
小例子：阻止a标签不跳转
1.
2. var a = document.links[0];
3. a.addEventListener(‘click’, funciton (e) {
4. e.cancelHandler(e);
5. },false);
这样a标签就不会跳转了。
同时我们还可以用a标签的第四个用处，协议限定符来阻止默认事件。
1.
2. <a href=“javascript: void(0); “>www.baidu.com</a>
不仅仅是0，只要填写一个代表false的值，就可以取消掉默认事件。
事件对象
在IE中，系统不会把事件对象传到方法中，因此我们的参数e或者event在IE中是不好用的，IE会把事件对象传递到window.event上，所以当我们使用事件对象的时候，就要写兼容性的写法：
1.
2. var event = e || window.event;
这样就可以正常地获取到事件对象了。
事件委托
事件源对象
我们现在有一个ul，下面有十万个li，当我们给父级的ul添加第一个点击事件之后，由于事件冒泡的存在，不论我们点击哪一个li都会调用父级的点击事件处理函数，这个时候触发父级ul的点击函数的那个li就被称之为事件源对象。
event.target 是火狐的获取事件源对象
event.srcElement 是IE的获取事件源对象
chrome两种都有
因此我们在获取事件源对象的时候也需要写兼容性写法， 配合刚才的事件对象的兼容性写法就是这个样子的：
1.
2. oUl.addEventListener(‘click’, function (e) {
3. var event = e || window.event;
4. var tar = event.target || event.srcElement;
5. console.log(tar);
6. }, false);
我们利用事件源对象和事件冒泡来处理的方式就叫做事件委托。
1.
2. oUl.addEventListener(‘click’, function (e) {
3. var event = e || window.event;
4. var tar = event.target || event.srcElement;
5. console.log(tar.innerHTML);
6. }, false);
事件委托的优点：
1.性能 不需要循环所有的子元素一个个绑定事件
2.灵活 当有新的子元素被加入的时候不需要重新绑定事件