事件冒泡

事件冒泡：只要有多个元素嵌套，且他们绑定了相同的事件，那么子元素事件触发了，会把他接收到的事件传给自己的父级元素、祖宗元素，一直到window。
注意：事件冒泡和元素的在页面中显示出来的位置没有关系，而是跟html代码中的位置有关系，必须是嵌套关系。也就是说即使有嵌套关系的父子元素，定位在两个不同的地方，点击子元素也会向父元素传递相同的事件触发，也就是说父元素也发生了点击事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1{
      width: 300px;
      height: 200px;
      background-color: red;
    }
    #dv2{
      width: 250px;
      height: 150px;
      background-color: green;
    }
    #dv3{
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
<script>
  document.getElementById("dv1").onclick=function () {
    console.log(this.id);
  };
  document.getElementById("dv2").onclick=function () {
    console.log(this.id);
  };
  document.getElementById("dv3").onclick=function (e) {
    console.log(this.id);
  };
</script>
</body>
</html>

在这里插入图片描述
2. 引入：事件处理参数对象（e）
必须有事件触发、有处理函数、那么当事件触发时，会自动传入向处理函数传入一个默认有参数，且该参数是一个对象，即事件处理参数对象。
如以下dv对象，绑定了onclick事件，且有处理函数，当点击该div时，控制台输出1，表示，传入了一个默认参数，该参数对象的名字，一般使用event或e，但这不是必须的，可以用任何合法的变量名。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv{
      width: 300px;
      height: 200px;
      background-color: red;
    }
  </style>
  <script>
  </script>
</head>
<body>
<div id="dv">
</div>
<script>
  //事件处理参数对象
  document.getElementById("dv").onclick=function () {
    console.log(arguments.length);//输出为1，也就是有一个默认参数
    console.log(arguments[0]);//是一个对象
  };
</script>
</body>
</html>

解决事件冒泡的方法
window.event.cancelBubble=true; IE特有的,谷歌支持,火狐不支持
e.stopPropagation(); 谷歌和火狐支持,
如下，点击dv3后，dv2和dv1的点击事件的结果不再输出

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    #dv1{
      width: 300px;
      height: 200px;
      background-color: red;
    }
    #dv2{
      width: 250px;
      height: 150px;
      background-color: green;
    }
    #dv3{
      width: 200px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>
<div id="dv1">
  <div id="dv2">
    <div id="dv3"></div>
  </div>
</div>
<script>
  document.getElementById("dv1").onclick=function () {
    console.log(this.id);
  };
  document.getElementById("dv2").onclick=function () {
    console.log(this.id);
    //window.event.cancelBubble=true;
  };
   document.getElementById"dv3").onclick=function (e) {
    console.log(this.id);
    e.stopPropagation();//从哪里开始阻止事件冒泡就在哪里加这个方法
  };
</script>
</body>
</html>