事件委托、阻止默认动作、阻止事件冒泡

事件委托

正确写法

function delegate(element, eventType, selector, fn) {
  element.addEventListener(eventType, e => {
    let target = e.target
    while (!target.matches(selector)) {
      if (element === target) {
        target = null
        break
      }
      target = target.parentNode
    }
    target && fn.call(target, e, target)
  })
  return element
}

常见错误写法

bug 在于，如果用户点击的是 li 里面的 span，就没法触发 fn，这显然不对。

 ul.addEventListener('click', function(e){
     if(e.target.tagName.toLowerCase() === 'li'){
         fn() // 执行某个函数
     }
 })

阻止冒泡

function bubbles(e){
  var ev = e || window.event;
  if(ev && ev.stopPropagation) {
    //非IE浏览器
    ev.stopPropagation();
  } else {
    //IE浏览器(IE11以下)
    ev.cancelBubble = true;
  }
}

阻止默认动作

return false不能适用于直接用onclick绑定的事件，所以当我们使用这种绑定事件方式时，我们还是需要采用e.preventDefault()这个函数

  function defaultEvent(e){
    if(e && e.preventDefault) {
      //非IE浏览器
      e.preventDefault();
    } else {
      //IE浏览器(IE11以下)
      window.event.returnValue = false;
    }
    return false;
  }