DOM事件

DOM事件是指在HTML文档中，当特定的动作发生时（比如用户点击按钮、页面加载完成等），浏览器会生成相应的事件。JavaScript通过事件处理程序（Event Handlers）来捕获、处理这些事件，从而实现与用户交互、页面交互等功能。

常见的DOM事件包括：

1. 点击事件（click）： 用户点击页面上的元素时触发。
2. 提交事件（submit）： 当表单提交时触发。
3. 改变事件（change）： 当表单元素的值改变时触发（通常用于输入框、下拉框等）。
4. 鼠标移入/移出事件（mouseover/mouseout）： 当鼠标移入或移出元素时触发。
5. 键盘事件（keydown/keyup）： 当用户按下或释放键盘上的按键时触发。
6. 页面加载事件（load）： 当页面完全加载时触发。
7. 窗口大小改变事件（resize）： 当浏览器窗口大小改变时触发。

事件

事件：浏览器赋予元素的默认行为，可以理解为事件是天生具备的。不论是否为其绑定方法，当某些行为触发的时候，相关的事件都会被触发执行。

事件绑定：给元素默认的事件行为绑定方法，这样在行为触发的时候才会执行绑定的方法。

document.body.onclick=function (){}; 大部分人：给body绑定一个点击事件 标准：给body的点击事件行为绑定方法

鼠标事件

• 元素.onclick=function(){} 单击（移动端：300ms内没触发第二次，所以click在移动端有300ms延迟）；点击（PC端）
• 元素.oncontextmenu=function(){}右键点击
• 元素.ondblclick=function(){} 双击，大约300ms内连续点击两次
• 元素.onmouseenter=function(){}鼠标移入，进入子节点不会触发这个事件
• 元素.onmouseleave=function(){}鼠标离开，进入子节点不会触发这个事件
• 元素.onmouseout=function(){}鼠标滑出，进入子节点会触发这个事件
• 元素onmouseover=function(){}鼠标滑过，进入子节点会触发这个事件
• 元素.onmousemove=function(){}鼠标滑动，只要鼠标动就会触发
• 元素.onmousedown=function(){}鼠标按下
• 元素.onmouseup=function(){}鼠标抬起
• 元素.onwheel=function(){}滚轮滚动

mouseover和mouseenter的区别

image.png

enter和leave会受到元素之间的层级关系，默认阻止了事件冒泡机制

image.png

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！