🟡JavaScript事件

本文最后更新于:2024年4月25日 上午

事件流

🍉事件捕获

自顶层向深层传递

🍉事件冒泡

自最深层向顶层传递

🍉DOM事件流

事件监听器

on+事件名构成事件监听器

🥑HTML标签使用监听器

在HTML标签内使用事件监听器属性可为元素绑定事件

此时this指向当前元素

触发事件后生成event参数描述事件(不可自定义改参数名)

1
<button onclick="alert('Hellow World!')">Click</button>

🥑DOM事件监听器

  • 元素节点的事件监听器属性 DOM0

该属性接收一个处理函数处理事件,函数有可选参数传递event(可自定义该参数名)

当不使用箭头函数时this指向事件监听器绑定的元素节点

1
2
3
4
const Button = document.querySelector('butto')
Button.onclick = function(e) {
alert('Hellow World!')
};


  • EventListener方法 DOM2

addEventListener('eventName', (e) => {} [, Boolean])

处理函数可接收event参数,this为事件监听器绑定的元素节点(箭头函数无)

可为同一事件绑定多个事件监听器

布尔值 true:事件捕获阶段,false:事件冒泡阶段(默认)

1
2
3
4
5
6
const Button = document.querySelector('butto')
Button.addEventListener(
'click',
function(e) {
alert('Hellow World!')
}, false)

removeEventListener('eventName', (e) => {} [, Boolean])

不可移除匿名函数, 需与创建时的函数相同

1
2
3
const Say = (e) => alert('Hellow World!')
Button.addEventListener('click', Say, false)
Button.removeEventListener('click', Say, false)

事件对象

事件类型

🥦用户界面事件

🥦焦点事件

焦点转移时事件执行顺序,失去焦点事件在失焦元素触发,获得焦点事件在获得焦点的元素上触发

事件名 触发事件
focusout 支持冒泡 某元素失去焦点
foucusin 支持冒泡 某元素获得焦点
blur 不支持冒泡 某元素失去焦点
DOMFocusOut 已废弃 某元素失去焦点
focus 不支持冒泡 某元素获得焦点
DOMFocusIn 已废弃 某元素获得焦点

🥦鼠标与滚轮事件

DOM3新事件外其它鼠标事件均可冒泡与取消

事件名 触发事件
mousedown 任意鼠标键按下
mouseup 任意鼠标键弹起
click 鼠标单击或敲击回车
dblclick 鼠标双击主键
mouseenter DOM3 鼠标从元素外移入
mouseleave DOM3 鼠标移出本元素
mousemove 鼠标在元素上移动(多次触发)
mouseover 鼠标移至其它元素
mouseout 鼠标移至本元素
mousewheel 滚轮滚动

📌鼠标位置

鼠标事件触发event参数可传递触发时鼠标的位置

属性
clientX/clientY 视口坐标
pageX/pageY 网页页面坐标
screenX/screenY 设备屏幕坐标

📌修饰键

鼠标事件触发event参数可传递触发时几个特殊键的状态

属性
shiftKey shift
ctrlKey shift
altKey alt
metaKey meta/win/command

🥦键盘与输入事件

事件名 触发事件
keydown 键按下
keypress DOM3已废弃 产生字符前
keyup 键释放

🥦合成事件

参考文档:

《JavaScript高级程序设计 第四版》


🟡JavaScript事件
https://qingshaner.com/JavaScript事件/
作者
清山
发布于
2022年2月11日
许可协议