JavaScript 事件简介
常用浏览器事件
鼠标事件：
click—— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。dbclick——在短时间内双击同一元素后触发。如今已经很少使用了contextmenu—— 当鼠标右键点击一个元素时。mouseover/mouseout—— 当鼠标指针移入/离开一个元素时。mousedown/mouseup—— 当在元素上按下/释放鼠标按钮时。mousemove—— 当鼠标移动时。
键盘事件：
keydown和keyup—— 当按下和松开一个按键时。
表单（form）元素事件：
submit—— 当访问者提交了一个<form>时。focus—— 当访问者聚焦于一个元素时，例如聚焦于一个<input>。
Document 事件：
DOMContentLoaded—— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。
CSS 事件：
transitionend—— 当一个 CSS 动画完成时
Event
addEventListener
-
语法：
element.addEventListener(event, handler[, options]); -
参数：
event：事件名handler：处理程序- options：可选参数
once：如果为true，那么会在被触发后自动删除监听器。capture：事件处理的阶段，捕获于冒泡false/true，它与{capture: false/true}相同。passive：如果为true，那么处理程序将不会调用preventDefault()
- 这里的
handler也可以是对象/类，只要它包含对象处理程序handleEvent，必须是这个命名。当addEventListener接收一个对象作为处理程序时，在事件发生时，它就会调用obj.handleEvent(event)来处理事件
<button id="elem">Click me</button>
<script>
let obj = {
handleEvent(event) {
alert(event.type + " at " + event.currentTarget);
}
};
elem.addEventListener('click', obj);
</script>
removeEventListener
- 语法：
element.removeEventListener(event, handler[, options]); - 注意：要移除处理程序，我们需要传入与分配的函数完全相同的函数，因此箭头函数定义的监听器将无法移除，因为地址不同
event对象
当事件发生时，浏览器会创建一个 event 对象，将详细信息放入其中，并将其作为参数传递给处理程序：
event.type——事件类型event.currentTarget——处理事件的元素。这与this相同，除非处理程序是一个箭头函数，或者它的this被绑定到了其他东西上，之后我们就可以从event.currentTarget获取元素了event.clientX / event.clientY——指针事件（pointer event）的指针的窗口相对坐标- 其他
冒泡和捕获
冒泡
-
冒泡（bubbling）：（目标元素→父元素）当一个事件发生在一个元素上，它会首先运行在该元素上的处理程序，然后运行其父元素上的处理程序，然后一直向上到其他祖先上的处理程序
-
冒泡中的
event.target：父元素上的处理程序始终可以获取事件实际发生位置的详细信息。引发事件的那个嵌套层级最深的元素被称为目标元素,可以通过
event.target访问。它与this（也是event.currentTarget）之间是有区别的：event.target—— 是引发事件的“目标”元素，它在冒泡过程中不会发生变化。this—— 是“当前”元素，其中有一个当前正在运行的处理程序
-
停止冒泡：
冒泡事件从目标元素开始向上冒泡。通常，它会一直上升到
<html>，然后再到document对象，有些事件甚至会到达window，它们会调用路径上所有的处理程序。但是任意处理程序都可以决定事件已经被完全处理，并停止冒泡。用于停止冒泡的方法是event.stopPropagation()。
<body onclick="alert(`the bubbling doesn't reach here`)">
<button onclick="event.stopPropagation()">Click me
最低0.47元/天 解锁文章
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
