JavaScript-event对象常用的属性和方法有哪些？

作者: Petricor | 来源:发表于2023-07-09 22:03 被阅读0次

前言

从事多年开发，也经常性的给元素添加事件，但是最多的就是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.

给addEventListener的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事件冒泡的好处就是能够进行事件委托

addEventListener

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的值就会有所变变化

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
});