事件委托

事件委托什么是事件委托: 通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的。 原理: 利用冒泡的原理,把事件加到父级上,触发执行效果。 例如:要点击删除 ul 下的 li ,一般是都要给每个小li 绑定点击事件

事件委托"

什么是事件委托:

通俗的讲,事件就是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的话则既阻止默认行为又防止对象冒泡。

如有错误,欢迎指正!!!

今天的文章事件委托分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/56007.html

(0)
编程小号编程小号
上一篇 2023-08-27 09:11
下一篇 2023-08-27

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注