事件委托

  • 事件委托已关闭评论
  • 25 次浏览
  • A+
所属分类:Web前端
摘要

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


什么是事件委托:

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

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