事件操作

事件绑定函数

简单的通用事件绑定函数

function bindEvent (elem, type, fn) {
  elem.addEventListener(type, fn)
}

事件冒泡

事件会从触发的元素往上级元素一层一层触发

点击"触发"弹出触发，点击"取消"弹出取消
<body>
  <div id="div1">
    <p id="p1">触发</p>
    <p id="p2">取消</p>
    <p id="p3">取消</p>
  </div>
  <div id="div2">
    <p id="p4">取消</p>
    <p id="p5">取消</p>
  </div>
</body>

var p1 = document.getElementById('p1')
var body = document.body
bindEvent(p1, 'click', function(e){
  e.stopPropagation() //阻止触发body上的"取消"事件
  alert('触发')
})
bindEvent(body, 'click', function(e){
  alert('取消')
})

事件代理

点击a标签，弹出对应a标签的内容，a标签无限多
<div id="div1">
  <a href="">a1</a>
  <a href="">a2</a>
  <a href="">a3</a>
  ...
</div>
var div1 = document.getElementById('div1')
div1.addEventListener('click', function(e){
  var target = e.target
  if(target.nodeName === 'A') {
    e.preventDefault() //阻止默认事件
    alert(target.innerHTML)
  }
})

使用代理的完善的通用事件绑定函数

增加selector参数，指定代理的选择器，上面例子中指的是a标签
function bindEvent(elem, type, selector, fn) {
  //不使用代理的情况，selector=null
  if (fn === null) {
    fn = selector
    selector = null
  }
  elem.addEventListener(type, function(e){
    var target
    if(selector){
      target = e.target
      if(target.mateches(selector)){
        fn.call(target, e)
      }
    }eles{
      fn(e)
    }
  })
}

//根据上面例子
//使用代理的情况下
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function(e){
  console.log(this.innerHTML)
})
//不使用代理的情况下
var a1 = document.getElementById('a1')
bindEvent(a1, 'click', function(e){
  console.log(a1.innerHTML)
})

事件绑定函数

事件冒泡

事件代理

推荐阅读更多精彩内容