JavaScript-基础02-冒泡&默认行为

最新推荐文章于 2022-10-25 17:19:10 发布

wuCase

最新推荐文章于 2022-10-25 17:19:10 发布

阅读量227

点赞数

分类专栏： JavaScript 文章标签： js javascript dom event jquery

本文链接：https://blog.csdn.net/weixin_47402645/article/details/105859634

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

JavaScript-基础02-JavaScript-基础02-冒泡&默认行为

绑定事件
阻止事件冒泡（从内到外）
事件捕获（从外到内）
事件的默认行为

绑定事件

1. addEventListener

<div class="father" id="father"> 
    <div class="son" id="son"></div>
  </div>

  <script>
   window.onload = function(){
    var df = document.getElementById("father");
    var ds = document.getElementById("son");  
    df.addEventListene("click", function(){
      console.log('df');
    })
      //兼容IE
    df.attachEvent("click", function(){
      console.log('df');
    })

在这里插入图片描述

2. onclick

<div class="father" id="father"> 
    <div class="son" id="son"></div>
  </div>

  <script>
   window.onload = function(){
    var df = document.getElementById("father");
    var ds = document.getElementById("son");
    ds.onclick = function(e){
      console.log(e.target);
    }

在这里插入图片描述

3.嵌入dom

 <div class="father" id="father"> 
    <div class="son" id="son" onclick="console.log('123456');"></div>

在这里插入图片描述

阻止事件冒泡（从内到外）

事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。（注意这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。）

事件冒泡

<body>
  <div class="father" id="father"> 
    <div class="son" id="son"></div>
  </div>

  <script>
   window.onload = function(){
    var df = document.getElementById("father");
    var ds = document.getElementById("son");
    df.onclick = function(e){
      console.log('父元素的点击事件');
   
    }
    ds.onclick = function(e){
      console.log('子元素的点击事件');  
    }
   }
  </script>
</body>

点击子元素（先触发子元素的点击事件，在再触发父元素的点击事件）
在这里插入图片描述
例如：父元素和子元素添加点击事件，点击子元素也会触发父元素的点击事件（兼容IE写法）

<body>
  <div class="father" id="father"> 
    <div class="son" id="son"></div>
  </div>
  <script>
   window.onload = function(){
    var df = document.getElementById("father");
    var ds = document.getElementById("son");
    df.onclick = function(e){
      console.log('父元素的点击事件');
   
    }
    ds.onclick = function(event){
      if(event && event.stopImmediatePropagation){
        event.stopPropagation();
      }else{
        //兼容IE
        event.cancelBubble = true;
      }
      console.log('子元素的点击事件');  
    }
   }
  </script>
</body>

在这里插入图片描述

事件捕获（从外到内）

例如：

<body>
  <div class="father" id="father"> 
    <div class="son" id="son"></div>
  </div>
  <script>
   window.onload = function(){
    var df = document.getElementById("father");
    var ds = document.getElementById("son");
    df.addEventListener("click", function(e){
      console.log('父元素的点击事件');
   
    }, true)

    ds.addEventListener("click", function(e){
      console.log('子元素的点击事件');
   
    }, true)

先触发父元素的事件，再触发子元素的事件

在这里插入图片描述

事件的默认行为

事件默认行为：
　　当一个事件发生的时候浏览器自己默认做的事情
怎么阻止？

<body>
  <a href="https://www.baidu.com/" id="bd">跳转到百度</a>
  <script>
   window.onload = function(){
    var bd =  document.getElementById("bd");

    bd.onclick= function(event){
    // 方法一
      // if(event && event.preventDefault){
      //   event.preventDefault();
      // }else{
      //   //兼容IE
      //   event.returnValue = true;
      // }
      console.log("不跳转到百度");
    // 方法二
      return false;
    }
   }
  </script>
</body>

在这里插入图片描述

在这里插入图片描述
内容仅供学习参考，若有错误欢迎大家指正----WUCASE

wuCase

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-基础02-冒泡&默认行为

JavaScript-基础02-JavaScript-基础02-冒泡&默认行为绑定事件1. addEventListener2. onclick3.嵌入dom阻止事件冒泡（从内到外）事件捕获（从外到内）事件的默认行为绑定事件1. addEventListener<div class="father" id="father"> <div class="son...
复制链接

扫一扫