JS进阶DAY3|事件（一）事件监听及事件类型

目录

一、事件监听方式（绑定）

1.1 DOM0级事件

1.2  DOM2级事件

1.3 区别

二、事件类型

2.1 鼠标事件

2.2 键盘事件

2.3 焦点事件

2.4 表单事件

2.5 加载和卸载事件

2.6 滚动事件

2.7 触摸事件（在支持触摸的设备上）

一、事件监听方式（绑定）

1.1 DOM0级事件

 直接将函数赋值给DOM元素的事件属性。

const btn = document.getElementById('myButton');

btn.onclick = handleClick;

1.2  DOM2级事件

使用 addEventListener 方法来添加事件监听器。

const btn = document.getElementById('myButton');

btn.addEventListener('click', handleClick);

1.3 区别

• 监听器数量

1. DOM0级事件：每个事件只能有一个监听器。
2. addEventListener ：可以为同一事件添加多个监听器。

• 移除监听器：

1. DOM0级事件：移除监听器不方便，且不总是可靠。 
2. addEventListener ：可以方便地通过 removeEventListener 移除监听器。

• 事件阶段：

1. DOM0级事件：仅在事件冒泡阶段触发。
2.  addEventListener ：可以选择在捕获或冒泡阶段触发。

二、事件类型

2.1 鼠标事件

 click ：当元素被点击时触发。

 dblclick ：当元素被双击时触发。

 mousedown ：当鼠标按钮被按下时触发。

 mouseup ：当鼠标按钮被释放时触发。

 mouseover ：当鼠标指针移动到元素上时触发。

 mouseout ：当鼠标指针移出元素时触发。

 mousemove ：当鼠标指针在元素上移动时触发。

 mouseenter ：当鼠标指针进入元素边界时触发。

 mouseleave ：当鼠标指针离开元素边界时触发。

2.2 键盘事件

 keydown ：当键盘上的任何键被按下时触发。

 keyup ：当键盘上的任何键被释放时触发。

 keypress ：当用户按下字符键时触发（在 keydown 和 keyup 之间）。

2.3 焦点事件

 focus ：当元素获得焦点时触发。

 blur ：当元素失去焦点时触发。

 focusin ：当元素即将获得焦点时触发。

 focusout ：当元素即将失去焦点时触发。

2.4 表单事件

 submit ：当表单被提交时触发。

 reset ：当表单被重置时触发。

 change ：当元素的值发生变化时触发（对于 <input> 、 <select> 和 <textarea> 元素）。

 input ：当 <input> 、 <select> 和 <textarea> 元素的值实时发生变化时触发。

2.5 加载和卸载事件

 load ：当页面或元素加载完成时触发。

 unload ：当页面或元素卸载时触发。

 DOMContentLoaded ：当DOM加载完成，不等待样式表、图像和框架完成加载时触发。

2.6 滚动事件

 scroll ：当元素滚动时触发。

2.7 触摸事件（在支持触摸的设备上）

 touchstart ：当手指触摸屏幕时触发。

 touchend ：当手指离开屏幕时触发。

 touchmove ：当手指在屏幕上移动时触发。

 touchcancel ：当触摸操作被中断时触发。