api - 事件委托

100 阅读1分钟

概念

    1、如果为父容器绑定事件,那么所有的子元素默认情况下都能触发这个事件,不管这个子元素是 已存在,还是将来创建的
    2、这里是利用事件冒泡的原理,为父容器绑定事件,将来所有子元素都会事件冒泡给这个父容器
    3、这种将事件绑定给父容器的做法让子元素也能响应事件--就叫做事件委托

参数.target --- 使用

    box.addEventListener('click', function (e) {
      // e.target:获取当前真正触发事件的对象,说白了,当前用户操作那个元素,e.target就是这个元素
      // console.log(e.target.classList.contains('son'))
      // 我们如何判断当前元素是我们需要的元素呢?
      // 1.我们会为元素添加标识,例如为元素添加一个自定义的类样式
      // 2.判断当前元素是否拥有指定的标识,如果有就是我们想要的元素
      if ((e.target.className = 'son')) {
        //判断如果点击了son这个盒子,则输出单击了son
        console.log('单击了son')
      } else if (e.target.classList.contains('sister')) {
        //判断如果点击了son这个盒子,则输出单击了sister
        console.log('单击了sister')
      } else if (e.target.classList.contains('other')) {
        //判断如果点击了son这个盒子,则输出单击了other
        console.log('单击了other')
      }
    })