点击事件和事件冒泡

最新推荐文章于 2025-09-08 14:36:55 发布

原创最新推荐文章于 2025-09-08 14:36:55 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

文章介绍了JavaScript中三种主要的事件类型：鼠标事件，键盘事件和浏览器事件，包括各自的常见事件如onclick和onload等。同时，详细讲解了事件冒泡的概念，即事件从子元素传递到父元素的过程，并展示了如何通过event.stopPropagation()来阻止事件冒泡，以便更好地控制事件的传播和处理。

三种点击事件

1，鼠标事件

单机事件 onclick
双击事件 ondblclick
移入事件 onmouseover
移出事件 onmouseou
进入事件 onmouseenter
离开事件 onmouseleave
按下事件 onmousedown
抬起事件 onmouseup

2，键盘事件

按下事件 onkeydown
抬起事件 onkeyup

3、浏览器事件

加载完成事件 onload
滚动事件 onscroll

事件冒泡

事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。
看个例子：

 <div id="box1">
    <div id="box2"></div>
 </div>
var div1 = document.getElementById("box1");
var div2 = document.getElementById("box2");
   div2.onclick = function(){
   alert(1);
   };
   div1.onclick = function(){
   alert(2);
   };

如果点击box2 先弹出1，然后会弹出2，这说明点击的时候，不仅box2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。

阻止事件冒泡: event.stopPropagation() (重点)

 <div id="box1">
    <div id="box2"></div>
 </div>
var div1 = document.getElementById("box1");
var div2 = document.getElementById("box2");
   div2.onclick = function(){
   alert(1);
   event.stopPropagation() 
   };
   div1.onclick = function(){
   alert(2);
   };