前端中事件冒泡和事件委托机制

最新推荐文章于 2022-08-26 10:51:29 发布

梦想称为大佬

最新推荐文章于 2022-08-26 10:51:29 发布

阅读量296

点赞数

分类专栏： HTMLcss

本文链接：https://blog.csdn.net/xawjz/article/details/119252008

版权

HTMLcss 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

事件冒泡

事件冒泡实际上是一个阶段，在这个阶段里的时候，当我们点击一个元素，会先查看这个事件有没有对应的处理函数，没有的话，他就会到他的父级上找有没有处理函数，如果有的话就执行。

 <body>
     <ul id="list1">
         <li id="p1">click</li>
         <li id="p2">click</li>
         <li id="p3">取消</li>
     </ul>
     ------------------------------
 
 </body>
 <script>
     let list1 = document.getElementById('list1');
     let p1 = document.getElementById('p1');
     let p2 = document.getElementById('p2');
     let p3 = document.getElementById('p3');
 
     p1.addEventListener('click',function(){
         event.stopPropagation(); //阻止继续向上冒泡
         console.log('p1:click');
     })
     p3.addEventListener('click',function(event){
         event.stopPropagation();//阻止继续向上冒泡
         console.log('取消');
     })
     list1.addEventListener('click',function(){
         console.log('list:click');
         
     })
 </script>

事件委托

根据事件冒泡机制，可以实现事件委托。当多个子元素需要绑定事件的的时候会浪费大量资源，如果直接给父级绑定事件监听，则会减轻这种资源浪费。通过点击事件处理函数中的event参数，进行处理

 body>
     <ul id="list1">
         <li id="p1">项目1</li>
         <li id="p2">项目2</li>
         <li id="p3">项目3</li>
     </ul>
     <button id="addButton">新增一项项目</button>
 
 </body>
 <script>
     let list1 = document.getElementById('list1');
     let p1 = document.getElementById('p1');
     let p2 = document.getElementById('p2');
     let p3 = document.getElementById('p3');
     let addButton = document.getElementById('addButton')
     addButton.addEventListener('click', function(){
         var li = document.createElement('li');
         li.innerHTML = '新增项目';
         list1.appendChild(li);
     })
     list1.addEventListener('click',function(event){
         const target = event.target;
         if(target.nodeName === 'LI'){
             alert(target.innerHTML);
         }
     })
 </script>

在面试的时候，被面试官问到这个问题，当时答得不错，面试官说你理论讲的很详细，能不能举一个例子来说一下，举例子的时候回答的并不好。所以以后在学习一些理论的时候，需要伴随着写写对应的demo，不能浅尝辄止，深入去想一些。