事件和冒泡机制

最新推荐文章于 2022-11-16 19:19:17 发布

Tina、

最新推荐文章于 2022-11-16 19:19:17 发布

阅读量204

点赞数

文章标签： js冒泡 js挖洞

本文链接：https://blog.csdn.net/jojo1218/article/details/102719704

版权

通过常见事件演示冒泡和挖洞过程

2.释义：当一个子标签触发某一个事件(比如click)后，该事件会从顶级父标签一级一级往该标签传递，
这个过程叫做挖洞，当找到该子标签之后事件会再从子标签开始一级一级往父标签传递，这个过程叫做冒泡。

   <style>
       body,body *{
           padding: 30px;
           margin: 30px;
           border: 5px solid red;
           display: block;
       }
       
   </style>
</head>
<body>
   body
 
   <div>
       div
       <section>
           section
           <p>
               p
               <span>
                   span
               </span>
           </p>
       </section>
   </div>
   <script>
       var span = document.querySelector('span');
       var p = document.querySelector('p');
       var section  = document.querySelector('section');
       var div = document.querySelector('div');
       var body = document.body;
       span.onclick = function(e){
           e.target.style.backgroundColor = 'orange';
           alert('span被点击了')
       }
       p.onclick = function(e){
           //e.target获取目标元素，也就是点击的是谁就是谁
           //e.target.style.backgroundColor = 'orange';
           //e.currentTarget获取的是事件传播到的当前标签，也就是传播到谁就是谁
           e. Target.style.backgroundColor = 'blue';
           alert('p标签被点击了')
       }
       section.onclick = function(e){
           //e.target.style.backgroundColor = 'orange';
           alert('section标签被点击了')
           //stopPropagation()阻止事件继续往下传播
           //e.stopPropagation();
           
       }
       div.onclick = function(){
           alert('div标签被点击了')
       }
       body.onclick = function(){
           alert('body标签被点击了')
       }
       //被点击的标签叫做目标元素，事件默认会从目标元素往上传播，直到传播到顶层父标签，这就是冒泡的过程。

       //addEventListener(事件名称,执行的功能,是否在挖洞过程中触发事件)有三个参数，第三个参数它的值是true/false，用来设置是否在挖洞过程中触发事件，默认该参数是省略的代表不在挖洞阶段触发事件
       //当事件被设置为在挖洞阶段触发，则事件会从顶级父标签一级一级往下传播，这就是挖洞的过程
       span.addEventListener('click',function(e){
           
          
           alert('span被点击了！！！！')
           
       },true)
       p.addEventListener('click',function(){
           alert('p被点击了！！！！')
       },true)
       section.addEventListener('click',function(){
           alert('section被点击了！！！！')
       },true)
       div.addEventListener('click',function(){
           alert('div被点击了！！！！')
       },true)
       body.addEventListener('click',function(){
           alert('body被点击了！！！！')
       },true)
   </script>

Tina、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件和冒泡机制

通过常见事件演示冒泡和挖洞过程2.释义：当一个子标签触发某一个事件(比如click)后，该事件会从顶级父标签一级一级往该标签传递，这个过程叫做挖洞，当找到该子标签之后事件会再从子标签开始一级一级往父标签传递，这个过程叫做冒泡。 <style> body,body *{ padding: 30px; margi...
复制链接

扫一扫