一看就会的事件委托的讲解

事件委托

事件委托是将子元素的事件委托给父元素。

实现的机制

事件委托是基于事件冒泡而实现的。

事件冒泡

子元素的事件被触发，它会传递给父元素，父元素的事件也会被触发，一直到根节点，这一个过程叫事件冒泡。

示例1

简单至极的事件委托

html结构

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

js代码

let ulDom = document.querySelector('ul')
ulDom.onclick = function (e) {
  if (e.srcElement.nodeName.toLowerCase() === 'li') {
    console.log('点击li元素')
  }
}

示例2

可应用于项目中的delegate的实现（注意处理一下浏览器兼容性）

/**
 * @function delegate的简单实现
 * @param parentDom dom对象
 * @param childDoms 数组
 * @param eventType 事件类型
 * @param callback 回调函数
 */
const delegate = function (parentDom, childDoms, eventType, callback) {
  const isChild = (childDom, parentDom) => {
    let parentNode
    if (childDom && parentDom) {
      parentNode = childDom.parentNode
      while (parentNode) {
        if (parentDom === parentNode) {
          return true
        }
        parentNode = parentNode.parentNode
      }
    }
    return false
  }
  parentDom.addEventListener(eventType, function (e) {
    for (let i = 0; i < childDoms.length; i++) {
      let parent = childDoms[i]
      if (parent === e.srcElement || isChild(e.srcElement, parent)) {
        if (typeof callback === 'function') {
          callback()
        }
      }
    }
  }, false)
}

谢谢阅读！