事件捕获和事件冒泡-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

事件捕获和事件冒泡

珍宝珠 2020-02-14 14:51:49 217

事件捕获和事件冒泡

分享到
取消 提交回答
全部回答(1)
  • 珍宝珠
    2020-02-14 14:53:26

    事件冒泡执行过程:从最具体的的元素(你单击的那个元素)开始向上开始冒泡,下面的案例的顺序是:content > wrap
    事件捕获执行过程:从最不具体的元素(最外面的那个盒子)开始向里面冒泡,下面的案例的顺序是:wrap > content

    image.png

    (addEventListener第三个参数写的是false, 默认为false)
     window.onload = function(){
         var wrap= document.getElementById("wrap");
         var content= document.getElementById("content");
         wrap.addEventListener("click", function(){
             console.log("我是wrap");
         }, false)
         content.addEventListener("click", function(){
             console.log("我是content");
         })
    }
    运行结果:我是content
         我是wrap
    
    (addEventListener第三个参数写的是true, 默认为false)
      window.onload = function(){
         var wrap= document.getElementById("wrap");
         var content= document.getElementById("content");
         wrap.addEventListener("click", function(){
             console.log("我是wrap");
         }, true)
         content.addEventListener("click", function(){
             console.log("我是content");
         })
    }
    
    
    运行结果:我是wrap
         我是content
    
    

    第三个参数写的是true,则按照事件捕获的执行顺序进行。

    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

相似问题