8.JavaScript事件处理模型 — 事件冒泡，捕获

事件处理的两个模型：事件冒泡、捕获

上一篇 JavaScript异步加载与加载时间线

---

---

一、事件冒泡与捕获

1、事件冒泡：
结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子
元素冒泡向父元素。（从代码的角度是自底向上一层层冒泡的）。

2、事件捕获：
1）结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自
父元素捕获至子元素（事件源元素）。（自顶向下）
一个对象的一个事件类型，只能存在一个事件处理模型（冒泡或捕获）
obj.addEventListener(type, fn, true);第三个参数为 true 就是事件捕获

3、触发顺序，先捕获，后冒泡
同一个对象的一个事件处理类型，上面绑定了两个事件处理，分别执行事件冒泡和
事件执行

wrapper.addEventListener('click', function () {
			console.log('wrapperBubble')
		}, false)
		content.addEventListener('click', function () {
			console.log('contentBubble')
		}, false)
		box.addEventListener('click', function () {
			console.log('boxBubble')
		}, false)
 
		wrapper.addEventListener('click', function () {
			console.log('wrapper')
		}, true)
		content.addEventListener('click', function () {
			console.log('content')
		}, true)
		box.addEventListener('click', function () {
			console.log('box')
		}, true)

给对象同时绑定两个事件，应遵循先捕获后冒泡的原则，所以打印的结果应该是wrapper， content， boxBubble， box，contentBubble， wrapperBubble，在第三个位置和第四个位置需要注意一下，当传递到box时为最底层子元素，此时会按照事件绑定的顺序来和执行。谁先绑定，谁先执行，boxBubble 先绑定，所以先执行。

4、focus，blur，change，submit，reset，select 等事件不冒泡

二、取消冒泡和阻止默认事件

1、取消冒泡：
W3C 标准 event.stopPropagation();

2、阻止默认事件:
1）默认事件 — 表单提交，a 标签跳转，右键菜单等
2）return false; 兼容性非常好，以对象属性的方式注册的事件才生效（这是句柄的
方式阻止默认事件，只有句柄的方式绑定事件才好使）
3）event.preventDefault();

三、事件委托

事件委托：利用事件冒泡，和事件源对象进行处理
优点：

1. 性能 不需要循环所有的元素一个个绑定事件
2. 灵活 当有新的子元素时不需要重新绑定事件

事件对象
在每一个事件处理函数中【div.οnclick=function(){}】，我们可以写一个形参（如 e），
系统可以传递事件对象（记载了数据发生时的状态和信息）到这个参数里面去。
非 ie 浏览器会把事件对象（记载了数据发生时的状态和信息）打包传到参数里面去。
ie 浏览器在 window.event 里面储存事件对象。

例：如果我们给一个ul中每个 li 绑定事件，要求点哪个 li 就输出哪个内容，如果用循环绑定事件那效果不好（如果是很多个 li 就没效率），不能动态，要用事件源和事件冒泡。

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<script>
	var ul = document.getElementsByTagName('ul')[0];
	ul.onclick = function(e){
		var event = e || window.event;
		var target = event.target || event.srcElement;
		console.log(target.innerText);
	}
</script>