JavaScript-event对象常用的属性和方法有哪些?
前言
- 从事多年开发,也经常性的给元素添加事件,但是最多的就是
click
事件,回想起来很多事件都没有仔细的用过,也没有添加过属性。 - 所以,最近整理一些javascript原生的事件,希望能够和大家一起学习。
基础:事件的三个阶段
- 1️⃣ 事件捕获阶段
- 2️⃣ 执行阶段(执行当前元素的注册事件)
- 3️⃣ 事件冒泡阶段。本节通过一个示例,对三个阶段加以总结
1.添加事件监听 addEventListener
addEventListener(type,listener,userCapture)可以向window或者想要添加监听的dom元素添加事件监听
- type:事件名称 click mouseover mouseout
- listener:事件注册函数
- userCapture:可选,bool类型,默认为false
示例:页面中嵌套三个盒子,box1,box2,box3(从外到内,依次是红色,绿色,蓝色),给三个盒子都注册点击事件,输出三个盒子的id,
盒子类型当userCapture
属性为false
时候,点击蓝色盒子时,结果如下:
当
userCapture
属性为true
时候,点击蓝色盒子时,结果如下:
事件捕获
分析:
当userCapture
属性为false时候,从里往外执行,这种执行效果称为事件冒泡,就像一个气泡从水里最深处往外冒一样。事件冒泡从里面往外面泡, box3-->box2-->box1.
给addEventListene
r的userCapture
属性赋值为true,选执行最外层的box1,再执行box2,box3,这种从外向里的过程是事件捕获。
结论:
在上述代码中,给addEventListener
的userCapture
属性赋值为true
,此时事件阶段是事件捕获阶段。
当addEventListener
的userCapture
属性赋值为false
时,此时事件阶段是事件冒泡阶段。
只要是某个元素的监听被触发了,都会经历事件的三个阶段,只不过监听的位置不一样而已。
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
width: 200px;
height: 200px;
background-color: red;
}
#box2 {
width: 150px;
height: 150px;
background-color: green;
}
#box3 {
width: 90px;
height: 90px;
background-color: blue;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
<script>
let box1 = document.getElementById('box1')
let box2 = document.getElementById('box2')
let box3 = document.getElementById('box3')
var boxs = [box1, box2, box3];
for (var i = 0; i < boxs.length; i++) {
boxs[i].addEventListener('click', outPut, true); //设置触发阶段
}
//点击事件函数
function outPut(event) {
console.log(event,'===event');
console.log(this.id);
}
</script>
</html>
1.2事件冒泡的好处就是能够进行事件委托
2. event对象常用的属性和方法
addEventListener(type,listener,userCapture) 在增加监听的时候,listener参数是可以获取到event参数的,里面除了包含基本的信息之外,还有很多的属性,那这些属性都有什么意思呢?
event属性
2.1 Event属性说明
属性名 | 值类型 | 描述 |
---|---|---|
altKey | Boolean | 触发事件时是否按下alt键【可做组合键事件】 |
bubbles | Boolean | 指的是该事件是否冒泡。和事件处理机制无关。 |
buttom | Number | 返回当事件被触发时,哪个鼠标按钮被点击【0 指定鼠标左键。2 指定鼠标右键。4指定鼠标中键】 |
buttoms | Number | 表示一个数字,它表示在鼠标事件中哪些按钮被按下【1 指定鼠标左键。2 指定鼠标中键。4 指定鼠标右键。】 |
这些值可以组合使用,例如同时按下左键和右键会得到 3(1 + 2),同时按下左键、右键和滚轮按钮会得到 7(1 + 2 + 4)。📢示例:3.1.1
|
||
cancelable | Boolean | 用于表示事件是否可以被取消。📢示例:3.1.2
|
clientX | Number | 表示鼠标事件发生时的鼠标指针相对于浏览器窗口(视口)左上角的水平坐标位置。 |
clientY | Number | 表示鼠标事件发生时的鼠标指针相对于浏览器窗口(视口)左上角的垂直坐标位置。 |
ctrlKey | Boolean | 触发事件时是否按下ctrl键【可做组合键事件】 |
currentTarget | any | 用于表示事件当前正在被处理的元素(可以理解为触发事件的元素的父级元素,事件委托相关。 而触发事件的元素属性是event.target )。 |
defaultPrevented | Boolean | 表示事件的默认行为是否被取消 该属性是只读属性,不能直接修改其值。它仅用于指示事件的默认行为是否被取消 📢示例:3.1.3
|
detail | Number | 表示与鼠标事件或滚轮事件相关的附加信息,【1.对于点击事件,则表示连续点击的次数】【2.对于滚动事件来说则表示鼠标滚轮事件的滚动量,通常表示为正值或负值】📢示例:3.1.4
|
deltaMode | Number | deltaMode 是 WheelEvent 对象的一个属性,在 JavaScript 中用于表示鼠标滚轮事件中滚动量的单位。 |
deltaX | Number | WheelEvent 对象的一个属性,在 JavaScript 中用于表示鼠标滚轮事件中水平方向上的滚动量。 |
deltaY | Number | WheelEvent 对象的一个属性,在 JavaScript 中用于表示鼠标滚轮事件中垂直方向上的滚动量。 |
deltaZ | Number | WheelEvent 对象的一个属性,在 JavaScript 中用于表示鼠标滚轮事件中Z轴方向上的滚动量 |
eventPhase | Number | 表示事件当前所处的阶段。【0表示事件尚未触发,1表示事件正在处于事件捕获阶段。2示事件正在处于事件捕获阶段。3.表示事件正在处于事件冒泡阶段。】 |
isTrusted | Boolean | 表示事件是否由用户操作触发,并且是否可以被认为是可信的 |
metaKey | Boolean | 用于表示在触发事件时是否按下了操作系统特定的 Meta 键(如 Command 键或 Windows 键)。【在 macOS 系统中,Meta 键是 Command 键;在 Windows 系统中,Meta 键是 Windows 键】 |
movementX | Number | 只读属性,用于获取鼠标从上一个 mousemove 事件到当前 mousemove 事件中鼠标在水平方向上的移动距离。这个属性可以在mousemove 事件的事件处理函数中通过事件对象(比如 event 或e )来访问
|
movementY | Number | 只读属性,用于获取鼠标从上一个 mousemove 事件到当前 mousemove 事件中鼠标在垂直方向上的移动距离。这个属性可以在mousemove 事件的事件处理函数中通过事件对象(比如 event 或e )来访问
|
pageX | Number | 鼠标在页面水平坐标位置上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化, |
pageY | Number | 鼠标在页面垂直坐标位置上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化, |
relatedTarget | any |
relatedTarget 是一个事件属性,用于获取与事件相关的目标元素或移出的元素。它主要用于鼠标事件(如 mouseover 和 mouseout )和焦点事件(如 focusin 和focusout ) |
screenX | Number | 鼠标相对于用户显示器屏幕 左上角的X轴的位置。📢示例:3.1.5
|
screenY | Number | 鼠标相对于用户显示器屏幕 左上角的Y轴的位置。 |
shiftKey | Boolean | 触发事件时是否按下shift键【可做组合键事件】 |
target | any | 该事件被传送的对象。📢详情查看表target详解
|
timeStamp | Number | 用于获取事件发生的时间戳。时间戳表示从特定的参考点(通常是1970年1月1日UTC时间午夜)开始计算的毫秒数。 |
type | String | 监听事件的类型 |
view | Wiindow | 用于获取触发事件的窗口的相关信息。 |
getModifierState | Function | 是 键盘事件对象的一个方法,在 JavaScript 中用于检查键盘事件中的修改键(如 Shift、Ctrl、Alt 和 Meta/Command 键)的状态。📢示例:3.1.9
|
isDefaultPrevented | Function | 用于检查事件是否调用了preventDefault() 方法来阻止默认行为。调用event.isDefaultPrevented() 会返回一个布尔值,如果默认行为已被阻止,则返回true ,否则返回false 。📢示例:3.1.10
|
isPropagationStopped | Function | 用于检查事件是否已经停止了事件传播。📢示例:3.1.11
|
2.2 target 属性说明
- target 事件属性可返回事件的目标节点(触发该事件的节点),如生成事件的元素、文档或窗口
- target 内是目标节点的属性有很多,这里截取最常用的几个
属性名 | 值类型 | 描述 |
---|---|---|
nodeName | String | 获取事件触发元素的标签 |
id | String | 触发元素的id名称 |
className | string | 触发元素的类名 |
innerHTML | String | 触发元素的内容,包括子元素的dom |
innerText | String | 触发元素内部的text文本 |
baseURI | String | 触发元素当前的url路径 |
3 此处放置event属性的示例
3.1 属性示例
3.1.1 buttoms 属性示例
element.addEventListener('mousedown', function(event) {
if (event.buttons === 1) {
console.log("左键被按下了");
} else if (event.buttons === 2) {
console.log("右键被按下了");
} else if (event.buttons === 4) {
console.log("中间按钮被按下了");
} else if (event.buttons === 3) {
console.log("左键和右键被按下了");
} else if (event.buttons === 7) {
console.log("左键、右键和中间按钮被按下了");
}
});
3.1.2 cancelable 示例
如果 cancelable
属性为 true,则事件可以被取消,即可以调用 event.preventDefault()
方法取消默认行为。取消事件的默认行为意味着阻止浏览器执行与事件相关的默认操作。例如,阻止表单的提交、禁止链接的跳转等。
如果 cancelable
属性为 false,则事件不可被取消,无法调用 event.preventDefault()
方法。
element.addEventListener('click', function(event) {
if (event.cancelable) {
event.preventDefault(); // 取消事件的默认行为
console.log("事件已被取消");
}
});
3.1.3 defaultPrevented示例
当调用 event.preventDefault()
方法取消事件的默认行为时,defaultPrevented
属性的值将变为true
。如果事件的默认行为没有被取消或事件不支持取消默认行为,defaultPrevented
属性的值将为 false
。
element.addEventListener('click', function(event) {
event.preventDefault(); // 取消事件的默认行为
console.log("事件的默认行为已被取消:" + event.defaultPrevented);
});
3.1.4 detail 示例
element.addEventListener('click', function(event) {
console.log("点击事件发生的次数:", event.detail);
});
element.addEventListener('wheel', function(event) {
console.log("滚动量:", event.detail);
});
当用户点击元素时,会输出点击事件发生的次数,以及当用户滚动鼠标滚轮时,会输出滚动的量(正向滚动为正值,负向滚动为负值)。
需要注意的是,`detail` 属性在一些浏览器中已经被废弃,可以使用 `event.deltaX` 或 `event.deltaY` 替代,具体取决于事件类型。
3.1.5 screenX示例
注意:当你的浏览器窗口和你的屏幕大小一样大的时候,pageX
、screenX
、clientX
的值是一样大的,但是,当你改变浏览器窗口的大小改变浏览器位置的时候, screenX
的值就会有所变变化
3.1.6 cancelable 示例
3.1.9 getModifierState示例
getModifierState
方法接受一个参数,即指定要检查的修改键的字符串表示形式。常见的参数值包括:
- Shift:用于检查 Shift 键的状态。
- Control:用于检查 Ctrl 键的状态。
- Alt:用于检查 Alt 键的状态。
- Meta 或 Command:用于检查 Meta/Command 键(通常是 Windows 键或 Command 键)的状态。
document.addEventListener('keydown', function(event) {
if (event.getModifierState('Shift')) {
console.log("Shift 键按下");
}
if (event.getModifierState('Control')) {
console.log("Ctrl 键按下");
}
if (event.getModifierState('Alt')) {
console.log("Alt 键按下");
}
if (event.getModifierState('Meta') || event.getModifierState('Command')) {
console.log("Meta/Command 键按下");
}
});
- 在上面的示例中,当用户按下键盘上的某个键时,
getModifierState
方法被用来检查修改键的状态。对于处于按下状态的修改键,相应的消息将被输出到控制台。 - 需要注意的是,不同的浏览器可能在检测键盘事件和修改键状态时有所不同,因此在使用
getModifierState
方法时,最好先进行测试和兼容性检查。
3.1.10 isDefaultPrevented 方法示例:
document.getElementById('myLink').addEventListener('click', function(event) {
event.preventDefault();
console.log(event.isDefaultPrevented()); // true
});
- 在这个示例中,当点击具有ID为
myLink
的元素时,事件处理程序会调用preventDefault()
方法来阻止默认的点击行为。然后,isDefaultPrevented()
方法被调用,并且返回true
,表示默认行为已被阻止。
3.1.11 isPropagationStopped 方法示例:
- 在JavaScript中,事件传播包括捕获阶段、目标阶段和冒泡阶段。调用
event.stopPropagation()
方法可以停止事件在这些阶段的传播。isPropagationStopped
方法可用于检查事件是否已经停止了传播。
document.getElementById('myDiv').addEventListener('click', function(event) {
event.stopPropagation();
console.log(event.isPropagationStopped()); // true
});
document.body.addEventListener('click', function(event) {
console.log(event.isPropagationStopped()); // false
});