JavaScript事件总结

最新推荐文章于 2022-06-29 23:03:15 发布

Lemon{hello_word}

最新推荐文章于 2022-06-29 23:03:15 发布

阅读量449

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/hjb_nice/article/details/105794043

本文深入解析JavaScript事件机制，包括事件的定义、常见事件类型如click、mouseover与mouseenter的区别，以及事件传播机制的三个阶段：捕获目标阶段、目标阶段和冒泡阶段。了解这些将帮助开发者更精确地控制页面交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript事件总结
1、什么是事件？
事件是JS操作dom的方式，JavaScript和HTML的交互是通过事件实现的
事件有可能是由用户发起的，比如鼠标事件，键盘事件，窗口事件，表单事件，也有可能是页面加载资源过程中的事件。
常见的事件比如：click, dbclick, keydown, keypress, keyup, mousemove, wheel, scroll, focus, blur, load, unload, abort, error, resize, change, select, submit, 大概这些及其相关的。
需要注意的是mouseenter和mouseover的区别
mouseenter只对加了mouseenter事件本身的元素起作用，对其子元素不起作用，可理解为在mouseenter中不存在冒泡机制
mouseover则对自己的子元素也起作用，可理解为mouseover中存在冒泡机制
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave
因此mouseenter子元素不会反复触发事件
2、事件传播机制
事件传播机制有3个阶段
捕获目标阶段，window不断经过下级节点直到目标节点,一步步捕获前进,需要注意的是，所有经过的节点，都会触发这个事件。
即如果我的目标是点击到

，但是沿途经过的document,html,body均会被点击
处于目标阶段，到达事件触发地点
冒泡阶段，当事件到达目标节点之后，会像冒泡泡一样沿着原路返回至window,因此叫冒泡阶段