JS DOM编程笔记

您所在的位置：网站首页 › 点击事件js › JS DOM编程笔记

JS DOM编程笔记

2023-04-04 05:56| 来源: 网络整理| 查看: 265

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

在JavaScript中绑定的点击、键盘等事件，如果要触发它，需要用户手动去触发它。

今天我们将通过代码的方式来触发这些事件。

我们将会用到Event 构造函数和 element.dispatchEvent()方法。

使用代码来生成事件的步骤如下：

首先用Event 构造函数创建一个新的 Event 对象。然后，使用 dispatchEvent() 方法触发事件。 Event 构造函数

使用Event 构造函数来创建一个新事件：

let event = new Event(type, [,options]); 复制代码

Event 构造函数接受两个参数：

type

指定事件类型，比如click。

options

为对象类型，有两个属性：

bubbles：为布尔值，表示事件是否冒泡。如果为true，则事件冒泡，反之亦然。

cancelable：也是布尔值，表示事件是否可以取消，如果为true，则可以取消，反之亦然。

默认options对象为：

{ bubbles: false, cancelable: false} 复制代码

下面我使用默认的options创建了一个点击事件

let clickEvent = new Event('click'); 复制代码 dispatchEvent 方法

创建完事件后，我们就可以使用dispatchEvent() 方法在目标元素上触发它，像这样

element.dispatchEvent(event); 复制代码

下面我在一个页面中来测试它：

测试dispatchEvent()方法 let btn = document.querySelector('.btn'); btn.addEventListener('click', function () { alert('点击了'); }); let clickEvent = new Event('click'); btn.dispatchEvent(clickEvent); 复制代码

点击此处查看在线示例：

codepen.io/cmdfas-the-…

在上面的例子中，我们不用手动点击按钮就会触发事件监听程序，就像我们点击了按钮一样。

那么我们如何区分事件是由用户触发还是代码触发呢？

问的好，如果事件来自用户操作，则 event.isTrusted 属性为 true。如果事件由代码触发，则 event.isTrusted 为 false。

所以，我们可以通过判断 event.isTrusted 属性的值来确定事件是否由用户触发。

Event 是 UIEvent 的父类，UIEvent 是其他特定事件类型的父类，例如 MouseEvent、TouchEvent、FocusEvent 和 KeyboardEvent。

我们最好使用 MouseEvent 这样的详细事件构造函数而不是通用的 Event 构造函数，因为这些构造函数提供了更多特定于事件的信息。

例如，MouseEvent 事件有许多其他属性，例如 clientX 和 clientY，它们指定事件发生时相对于视口的水平和垂直坐标：

let clickEvent = new MouseEvent("click", { bubbles: true, cancelable: true, clientX: 150, clientY: 150 }); 复制代码

下面链接展示了MouseEvent的全部属性：

www.w3.org/TR/uievents…

总结

我可以使用特定的事件构造函数（例如 MouseEvent）并在元素上调用 dispatchEvent() 方式手动触发事件。

通过使用 event.isTrusted 判断事件是由代码还是用户触发。

一起学习更多前端知识，微信搜索【小帅的编程笔记】，每天更新

【本文地址】

JS DOM编程笔记

JS DOM编程笔记

今日新闻

推荐新闻