event事件及事件冒泡

远方@诗

已于 2023-05-02 11:50:50 修改

阅读量203

点赞数

文章标签： css javascript 前端

于 2023-05-02 10:08:53 首次发布

本文链接：https://blog.csdn.net/xaiozhao/article/details/130459281

版权

一、event事件

任何事件的触发都会产生event对象

event事件对象属性

属性	说明
event.type	type属性指示事件类型。
event.which	which 属性指示按了哪个键或按钮。
event.clientX	事件触发时鼠标距离窗口左边的距离(可视区域)。
event.clientY	事件触发时鼠标距离窗口上边的距离(可视区域)。
event.screenX	事件触发时鼠标距离屏幕左边的距离。
event.screenY	事件触发时鼠标距离屏幕上边的距离。
event.button	返回值为0，左键；返回值为1，中键；返回值为2，右键
event.offsetX	当鼠标事件发生时，鼠标相对于事件发生元素左边的位置
event.offsetY	当鼠标事件发生时，鼠标相对于事件发生元素顶部的位置
event.pageX	当鼠标事件发生时.相对于文档窗口左边的位置
event.pageY	当鼠标事件发生时.相对于文档窗口顶部的位置

二、事件冒泡

（一）冒泡的认识

触发子元素身上的事件,也可以触发父元素身上同等类型事件，即当最里面的元素触发了事件的时候，会依次向上触发所有元素的相同事件（从触发事件的元素开始一直向上触发）。称之为事件冒泡。但是事件冒泡对我们几乎没有任何好处，所以我们需要阻止事件冒泡。

（二）阻止冒泡

语法：event.stopPropagation()

<style>
    #one {
      width: 300px;
      height: 300px;
      background: skyblue;
    }

    #two {
      width: 200px;
      height: 200px;
      background: green;
    }

    #three {
      width: 100px;
      height: 100px;
      background: red;
    }
  </style>
</head>

<body>
  <div id="one">
    <div id="two">
      <div id="three">

      </div>
    </div>
  </div>
  <script>
    //  给one  two three 三个div分别绑定点击事件
    var one = document.querySelector('#one');
    var two = document.querySelector('#two');
    var three = document.querySelector('#three');
    one.onclick = fn;
    two.onclick = fn;
    three.onclick = fn;
    function fn(eve) {
      console.log(eve);
      // 阻止冒泡
      eve.stopPropagation()
    }
  </script>
</body>

如果不阻止冒泡，当点击id为three的div时，相当于三个div全部都点击了，禁止之后事件只会停留在当前层。