代理及通用的事件监听函数

网页中执行任何一个功能，进行的任何一个操作，几乎都和事件有关

• 编写一个通用的事件监听函数

  test link  // 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）。

有时候，我们会用这一特性来增加我们的效率，比如下面种情况：

      

            
不行
            
好的
      
      

            
不行
            
不行
      

若需要在点击时弹出对应的 “好的”、“不行” 时，
逐个添加点击事件，明显不现实，
这时候，我们就可以利用事件冒泡这个特性，
当点击 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