JavaScript 事件监听
1、什么是事件监听？
addEventListener 是用来向指定元素添加事件监听器的方法。你可以使用它来指定事件触发时执行的函数。
以下是 addEventListener 的基本语法:
element.addEventListener(event, function, useCapture);
- element: 要添加事件监听器的元素。
- event: 要监听的事件类型，例如 "click"（鼠标点击）、"mouseover"（鼠标经过） 等。
- function: 当事件被触发时要调用的函数，也称为事件处理程序或回调函数。
- useCapture（可选）: 一个布尔值，指定事件是在捕获阶段还是冒泡阶段处理。一般设置为 false。
例如，下面的代码将为按钮元素添加一个点击事件监听器：
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
console.log('按钮被点击了！');
});这样，当按钮被点击时，控制台会输出 '按钮被点击了！'。你可以根据需要修改事件类型和事件处理函数。
2、事件类型
事件类型是指在浏览器中发生的不同类型的交互事件。以下是常见的几种事件类型：
1)鼠标事件
- click: 当鼠标单击元素时触发。
- dblclick: 当鼠标双击元素时触发。
- mouseover: 当鼠标移动到元素上方时触发。
- mouseout: 当鼠标移出元素时触发。
- mousemove: 当鼠标在元素内移动时触发。
2）键盘事件
- keydown: 当用户按下键盘上的任意键时触发。
- keyup: 当用户释放键盘上的任意键时触发。
- keypress: 当用户按下字符键时触发。
3）表单事件
- submit: 当表单提交时触发。
- reset: 当表单重置时触发。
- focus: 当元素获得焦点时触发。
- blur: 当元素失去焦点时触发。
- change: 当元素的值发生改变时触发。
4）页面生命周期事件
- load: 当页面完全加载时触发。
- unload: 当页面被卸载时触发。
- beforeunload: 当页面即将被卸载时触发。
- resize: 当窗口大小调整时触发。
- scroll: 当滚动条滚动时触发。
5）焦点事件
-
focus事件：- 当元素获得焦点时触发。
- 例如，当用户点击输入框或通过键盘导航到输入框时，
focus事件会被触发。 - 可以用于在元素获得焦点时执行一些操作，比如改变元素的样式或显示相关信息。
-
blur事件：- 当元素失去焦点时触发。
- 例如，当用户从输入框切换到其他元素时，
blur事件会被触发。 - 可以用于在元素失去焦点时执行一些操作，比如验证输入内容或隐藏辅助信息。
补充：
（2024/2/19）
mouseenter 是一个 JavaScript 事件，它在鼠标指针进入指定元素的可见部分时触发。当鼠标从元素的子元素移动到该元素本身时，也会触发 mouseenter 事件。
与 mouseenter 相关的事件还有 mouseleave，它在鼠标指针离开指定元素的可见部分时触发。与 mouseenter 不同的是，mouseleave 事件不会在鼠标从元素的子元素移动到该元素本身时触发。
这两个事件通常用于实现鼠标悬停（hover）效果，例如在网页中显示提示信息、改变元素样式或触发其他交互行为。
示例：
在上述示例中，我们创建了一个红色的正方形框，当鼠标指针进入框内时，框的背景颜色变为蓝色，当鼠标离开框时，背景颜色恢复为红色。
mouseenter 事件和 mouseover 事件都与鼠标指针在元素上的移动相关，但它们之间有一些重要的区别：
-
触发条件：
mouseenter事件只在鼠标指针进入指定元素的可见部分时触发，不会在鼠标从元素的子元素移动到该元素本身时触发。mouseover事件在鼠标指针进入指定元素或其子元素时都会触发，如果鼠标在元素内移动，也会持续触发mouseover事件。
-
冒泡行为：
mouseenter事件不具有冒泡（bubbling）行为，即当鼠标指针从子元素移动到父元素时，不会触发mouseenter事件。mouseover事件具有冒泡行为，当鼠标指针在元素及其子元素之间移动时，会依次触发每个元素的mouseover事件。
因此，如果需要在鼠标指针进入指定元素时触发事件，并且不希望受到子元素影响，可以使用 mouseenter 事件；如果需要在鼠标指针在元素及其子元素之间移动时触发事件，并且希望事件具有冒泡行为，可以使用 mouseover 事件。
当鼠标指针从页面外部进入内层矩形框时，控制台输出：
mouseenter: entered outer
mouseenter: entered inner
mouseover: entered outer
mouseover: entered inner
当鼠标指针从内层矩形框移动到外层矩形框时，控制台输出：
mouseover: entered outer
可以看到，当鼠标指针进入内层矩形框时，会依次触发 mouseenter 事件和 mouseover 事件；当鼠标指针从内层矩形框移动到外层矩形框时，只会触发 mouseover 事件，并不会触发 mouseenter 事件。
3、注意事项
在使用 querySelector 方法时，引号内的内容表示要查询的元素的选择器，可以是标签名（如 "button"）、类名（如 ".my-class"）或 ID（如 "#my-id"）。
如果你想根据元素的标签名来查询元素，则直接写标签名即可，不需要加点或井号。例如：document.querySelector('button') 表示查询第一个 元素。
如果你想根据元素的类名或 ID 来查询元素，则需要在引号内以点号或#开头，然后紧跟类名或 ID 的名称。例如：document.querySelector('.my-class') 表示查询第一个具有 "my-class" 类的元素，document.querySelector('#my-id') 表示查询具有 "my-id" ID 的元素。
总之，加点或加#取决于你要查询的元素的类型。如果是标签名，则不需要加点或井号；如果是类名或 ID，则需要加点或井号。