事件模型
(1). 什么是: 从触发事件开始，到所有相关的事件处理函数都执行完，所经历的过程 (2). 包括: 3个阶段:
- a. 捕获阶段:
当触发事件时，浏览器会从顶级元素，到当前触发事件的元素位置，遍历各级父元素上的事件处理函数。——仅遍历，记录，不触发！
为什么? 全球浏览器开发者都一致认为，点在内层元素上，也等效于点在了外层元素上。所以，要记录当前元素各级父元素上绑定的所以事件处理函数。
- b. 目标触发:
优先触发目标元素上的事件处理函数
目标元素(target): 最初触发事件的这个本来想点击的元素
- c. 冒泡阶段:
按照捕获阶段记录的父元素上的事件函数的顺序，由内向外反向触发各级父元素上的事件处理函数。
- 取消冒泡/停止漫延:
e.stopPropagation();
利用冒泡/事件委托/事件代理(delegate)
- 优化:
尽量减少事件监听对象的个数 - 为什么:
因为浏览器触发事件时是用遍历方式查找到事件监听对象。事件监听对象的多少，决定了遍历的速度，也决定了事件响应的速度。 - 何时:
当多个平级子元素要绑定相同的事件时，都必须利用事件委托。 - 如何:
- i.只将事件绑定在父元素一份即可！
结果: 点击任何一个子元素，都会冒泡触发父元素上的事件处理函数. - ii.如何获得目标元素:
错误: 用this！因为事件绑定在父元素上，由父元素触发执行，this->父元素。不再指子元素
正确: 用e.target代替this！
e.target: 专门保存目标元素的事件属性。不会随冒泡儿改变！vs this 冒泡到哪一个元素，就指哪个元素。
iii. 判断目标元素是否想要的。只有目标元素是想要的元素，才执行后续操作。否则什么也不做！
e. 阻止默认行为:- 1). 有些元素在点击后，总是带着浏览器默认的行为:
比如:
i. 点击click me，总是自动将#top加到url结尾！
ii. 点击总是自动提交 - 2).很多情况下，我们不需要这些默认行为！
- 3). e.preventDefault() 阻止 默认(行为)
- 1). 有些元素在点击后，总是带着浏览器默认的行为: