事件传播,传播方式,事件委托,阻止默认事件

111 阅读1分钟
  1. 事件传播

    在触发子元素的事件时,会将行为传播给父级的同类型事件;在传递行为时,会将行为一直向上传递,并触发父级(及以上)元素绑定的同类型事件。

    阻止事件传播:事件对象.stopPropagation() (在事件处理函数中添加)。

  2. 目标冒泡捕获

    目标:就是事件源

    冒泡:事件传播时,从目标开始传播,一直到父级,父级的父级最后到window;

    捕获:从最顶层开始,逐层向下传递,一直到目标。捕获方式,需要在addEventListener 第三个参数设置为 true,默认值为false,是冒泡传播。

  3. 事件委托

    因为事件冒泡的存在,所以点击子元素时一定会传播给父级,所以可以将子元素统一交给父级 。e.target:触发事件的事件源。

    var myUl = document.querySelector('ul')
    myUl.onclick = function (e) {
          if (e.target.nodeName === 'LI') {
              console.log('点击了 li')
           }
    }
    
  4. 阻止默认事件

    方式1: return false ;

    方式2: e.preventDefault() ;都是添加在事件处理函数之内