网页中执行任何一个功能，进行的任何一个操作，几乎都和事件有关
-
编写一个通用的事件监听函数
<a href="###" id="link1">test link</a> // html
- var link1 = document.getElementById('link1')
- link1.addEventListener('click', function (e) {
- e.preventDefault() //阻止默认事件
- console.log(123)
+ })
↑↑↑ 以上是传统的添加事件监听方法（addEventListener）。
↓↓↓ 下面就来封装一下。
- function bindEvent (ele, type, fn) {
- ele.addEventListener(type, fn)
- } // 封装函数，传入对象、监听类型及执行函数
-
+ var link1 = document.getElementById('link1')
- bindEvent(link1, 'click', function (e) {
- e.preventDefault()
- console.log(123)
- }) // 执行函数，并传入所需的值
-
事件冒泡
在一个对象上触发某类事件，如点击。如果此对象有点击事件，那就调用这个处理程序，如果事件返回 true 或者没有事件，那么这个点击会向对象的父级传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
有时候，我们会用这一特性来增加我们的效率，比如下面种情况：
<div id='content'>
<div id='pg1'>
<p id='p1'>不行</p>
<p id='p2'>好的</p>
</div>
<div id='pg2'>
<p id='p3'>不行</p>
<p id='p4'>不行</p>
</div>
</div>
若需要在点击时弹出对应的 “好的”、“不行” 时，
逐个添加点击事件，明显不现实，
这时候，我们就可以利用事件冒泡这个特性，
当点击 p 标签的时候，会一直冒泡到外面的div，
所以可以通过把点击事件绑定在 div 上来实现功能
var sayNo = document.getElementById('content') // 在content上触发
bindEvent (sayNo, 'click', function () {
alert('不行')
}) // 冒泡到这里的时候就会alert
var sayYes = document.getElementById('p2') // 给“好的”单独绑定
bindEvent (sayYes, 'click', function (e) {
e.stopPropagation() // 阻止冒泡，防止触发div上的事件
alert('好的')
})
-
代理（委托）
本来是一个对象执行的事件，交由给另一个对象执行，就是代理（委托）。
一般用于多个子对象的同一个操作，绑定到父对象身上，
从而实现代码和性能上的优化：
① 不用逐个绑定，绑定到父，解决所有子（节约代码且无需遍历）
② 即使后面动态加载进来的子对象也无需另外绑定。
那么下面了来完善一下通用事件监听函数
function bindEvent (ele, type, selector, fn) { // 加入选择器应对更多情况
if (fn == null) {
fn = selector
selector = null
}//当不使用selector时，把fn换到前面来
ele.addEventListener(type, function (e) {
//绑定事件，绑定时执行判断
var target
if (selector) {
//需要代理
target = e.target
if (target.matches(selector)) {
//判断，是否匹配选择器
fn.call (target, e)
} //执行主体为e.target，所以要把函数给回它执行
} else {
//不代理
fn(e)
}
})
}
在查找资料的过程中发现了这个讨论——事件委托和冒泡机制有关系吗？
看着看着把自己看懵逼了，委托和冒泡之间的内容是看懂了，
但是其中还详细讲述了冒泡和捕获的问题，
一时给了我一些冲击，我需要好好再研究这方面的问题。
Wait me back
