事件委托

什么是事件委托：

通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的。

原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。 

例如：要点击删除 ul 下的 li ,一般是都要给每个小li 绑定点击事件，然后再进行判断是否删除。代码如下： 

  <body>
    <input type="text" />

    <ul>
      <li>苹果</li>
      <li>香蕉</li>
      <li>鸭梨</li>
    </ul>

    <script>
      
    let ulList =document.querySelector("ul")
    let liList=document.querySelectorAll("li")
    for(let i=0;i<liList.length;i++){
      liList[i].onclick=function(){
        ulList.removeChild(this)
      }
    } 
    </script>

利用 事件委托删除：（js部分）

      let ul = document.querySelector('ul')
      ul.addEventListener('click', function (e) {
        ul.removeChild(e.target)
      })

则只需 给小 li 的亲父级绑定一个点击事件，利用冒泡，来进行删除。 

 

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。就像水里的泡泡一样，从最里面一直冒到最外面。

无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，就很像多诺米骨牌一样。只要就一个倒了，那么后面就会产生连锁反应。

阻止事件冒泡：

①e.stopPropagation()

在点击事件中 添加  e.stopPropagation() 。 即可阻止冒泡

主要代码如下：

<style>
    .big{
      width: 500px;
      height: 500px;
      background-color: red;
    }
    .center{
      width: 300px;
      height: 300px;
      background-color: green;
    }
    .small{
      width: 150px;
      height: 150px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="big">
    <div class="center">
      <div class="small"></div>
    </div>
  </div>

  <script>
    let big =document.querySelector('.big')
    let center =document.querySelector('.center')
    let small =document.querySelector('.small')

    big.addEventListener('click',function(e){
      console.log(e.target);
      console.log(this);
      console.log("我是big");
    })
    center.addEventListener('click',function(e){
      console.log("我是center");
      e.stopPropagation()

    })
    small.addEventListener('click',function(e){
      console.log("我是small");
    })
  </script>
</body>

②window.event.cancelBubble = true （谷歌，IE8兼容，火狐不支持）

其它代码与①一致，只展示修改部分：

    center.addEventListener('click',function(e){
      console.log("我是center");
      window.event.cancelBubble = true  //（谷歌，IE8兼容，火狐不支持）
    })

③合并取消：return false

在javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。

如有错误，欢迎指正！！！

posted @ 2022-10-23 12:05  一粒金灿米  阅读(141)  评论(0)  编辑  收藏  举报