js事件Event对象(自定义事件对象 CustomEvent)
文章目录
- 一、参考
- 二、Event 接口介绍
- 2.1 事件分类
- 三、 创建过时Event不推荐
- 3.1 document.createEvent
- 3.1.1 语法`var event = document.createEvent(type);`
- 3.1.2 案例
- 3.2 Event.initEvent()
- 3.2.1 语法 `event.initEvent(type, bubbles, cancelable);`
- 3.2.2 案例
- 四、推荐自定义事件
- 4.1 CustomEvent()
- 4.1.1 语法`event = new CustomEvent(typeArg, customEventInit);`
- 4.1.2 案例
- 4.2 EventTarget.addEventListener()
- 4.2.1 语法
- 4.2.2 案例
- 4.3 EventTarget.removeEventListener
- 4.3.1 语法
- 4.4 EventTarget.dispatchEvent
- 4.4.1 语法`cancelled = !target.dispatchEvent(event)`
- 4.5 event.preventDefault
一、参考
- Event 接口 MDN
- createEvent MDN
- CustomEvent MDN
- EventTarget.addEventListener MDN
二、Event 接口介绍
参考： Event 接口 MDN
Event 接口表示在 DOM 中出现的事件。
2.1 事件分类
一些事件是由
用户触发的，例如鼠标或键盘事件；而其他事件常由 API 生成，例如指示动画已经完成运行的事件，视频已被暂停等等。
事件也可以通过
脚本代码触发，例如对元素调用 HTMLElement.click() 方法，定义一些自定义事件，再使用 EventTarget.dispatchEvent() 方法将自定义事件派发往指定的目标（target）。
三、 创建过时Event不推荐
3.1 document.createEvent
参考：createEvent MDN
创建一个指定类型的事件。其返回的对象必须先初始化并可以被传递给 element.dispatchEvent (en-US)。
3.1.1 语法var event = document.createEvent(type);
参数
event : 就是被创建的 Event 对象.
type : 是一个字符串，表示要创建的事件类型。事件类型可能包括"UIEvents", "MouseEvents", "MutationEvents", 或者 "HTMLEvents"。
3.1.2 案例
// 创建事件
var event = document.createEvent('Event');// 定义事件名为'build'.
event.initEvent('build', true, true);// 监听事件
elem.addEventListener('build', function (e) {// e.target matches elem
}, false);// 触发对象可以是任何元素或其他事件目标
elem.dispatchEvent(event);
3.2 Event.initEvent()
已废弃:该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
Event.initEvent() 方法可以用来初始化由Document.createEvent() 创建的 event 实例.
3.2.1 语法 event.initEvent(type, bubbles, cancelable);
参数
type: 一个 DOMString 类型的字段，定义了事件的类型.
bubbles: 一个 Boolean 值，决定是否事件是否应该向上冒泡. 一旦设置了这个值，只读属性Event.bubbles也会获取相应的值.
cancelable: 一个 Boolean 值，决定该事件的默认动作是否可以被取消. 一旦设置了这个值, 只读属性 Event.cancelable 也会获取相应的值.
3.2.2 案例
// 创建事件.
var event = document.createEvent('Event');// 初始化一个点击事件，可以冒泡，无法被取消
event.initEvent('click', true, false);// 设置事件监听.
elem.addEventListener('click', function (e) {// e.target 就是监听事件目标元素
}, false);// 触发事件监听
elem.dispatchEvent(event);
四、推荐自定义事件
4.1 CustomEvent()
参考： CustomEvent MDN
构造方法 CustomerEvent() 创建一个新的 CustomEvent 对象。
4.1.1 语法event = new CustomEvent(typeArg, customEventInit);
参数
typeArg 一个表示 event 名字的字符串
customEventInit可选
bubbles 一个布尔值，表示该事件能否冒泡
cancelable 一个布尔值，表示该事件是否可以取消
4.1.2 案例
// add an appropriate event listener
obj.addEventListener("cat", function(e) { process(e.detail) });// create and dispatch the event
var event = new CustomEvent("cat", {detail: {hazcheeseburger: true}
});
obj.dispatchEvent(event);
4.2 EventTarget.addEventListener()
参考：EventTarget.addEventListener MDN
4.2.1 语法
target.addEventListener(type, listener, options);
target.addEventListener(type, listener, useCapture);
参数
type:
- 表示监听事件类型的字符串。
listener:
- 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。
- listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。
options 可选
- capture: Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
- once: Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
- passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
- useCapture 可选
- Boolean，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。
4.2.2 案例
<!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></head><body><table id="outside"><tr><td id="t1">one</td></tr><tr><td id="t2">two</td></tr></table></body><script>// 改变t2的函数function modifyText() {var t2 = document.getElementById("t2");if (t2.firstChild.nodeValue == "three") {t2.firstChild.nodeValue = "two";} else {t2.firstChild.nodeValue = "three";}}// 为table添加事件监听器var el = document.getElementById("outside");el.addEventListener("click", modifyText, false);</script>
</html>4.3 EventTarget.removeEventListener
删除使用 EventTarget.addEventListener() 方法添加的事件
4.3.1 语法
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);
参数
type
- 一个字符串，表示需要移除的事件类型，如 “click”。
listener
- 需要从目标事件移除的 EventListener 函数。
options 可选
- 一个指定事件侦听器特征的可选对象。可选项有：
- capture: 一个 Boolean 表示这个类型的事件将会被派遣到已经注册的侦听器，然后再派遣到DOM树中它下面的任何 EventTarget。
- mozSystemGroup: 仅可运行于 XBL 或者 Firefox Chrome，它是一个 Boolean，用于定义是否将侦听器添加到系统组。
- useCapture 可选
- 指定需要移除的 EventListener 函数是否为捕获监听器。如果无此参数，默认值为 false。
4.4 EventTarget.dispatchEvent
参考：EventTarget.dispatchEvent NDN
4.4.1 语法cancelled = !target.dispatchEvent(event)
参数
event 是要被派发的事件对象。target 被用来初始化 事件 和 决定将会触发 目标.
返回值
当该事件是可取消的(cancelable为true)并且至少一个该事件的 事件处理方法 调用了Event.preventDefault()，则返回值为false；否则返回true。
注意:
与浏览器原生事件不同，原生事件是由DOM派发的，
并通过event loop异步调用事件处理程序，
而dispatchEvent()则是同步调用事件处理程序。
4.5 event.preventDefault
参考： event.preventDefault
阻止元素发生默认的行为。
<!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></head><body><p>Please click on the checkbox control.</p><form><label for="id-checkbox">Checkbox:</label><input type="checkbox" id="id-checkbox" /></form><div id="output-box"></div></body><script>document.querySelector("#id-checkbox").addEventListener("click",function(event) {document.getElementById("output-box").innerHTML +="Sorry! <code>preventDefault()</code> won't let you check this!<br>";event.preventDefault();},false);</script>
</html>
js事件Event对象(自定义事件对象 CustomEvent)相关推荐
- Node.js: 如何继承 events 自定义事件及触发函数
events 是node.js的核心api ,几乎大部分node.js 的api都继承 events 类(javascript中没有类,也不存在继承,确切说是模拟类和继承,点击查看) 比如我们常见的 ...
- Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件
Vue2学习笔记:第九章 一.浏览器本地存储(WebStorage) 1.相关API 2.一些注意点 3.TodoList中的本地存储 二.组件自定义事件 1.引出组件自定义事件 2.怎么给组件绑定? ...
- switchpreference 事件_Vue 3 自定义事件
自定义事件 除了系统自带的原生 DOM 自带的事件之外,有时候我们需要用到这些自带的事件之外,我们就必须要自定义事件了. 事件名 不同于组件和 prop,事件名不存在任何自动化的大小写转换.而是触发的 ...
- 事件根基event_base、事件循环event_loop、事件event、信号事件SignalEvent
一.event_base (一) libevent简介与浅谈event_base libevent实际上就是对底层select/poll/epoll等进行了封装,每个event_base都有一种&qu ...
- 通过c# 实现自定义属性改变触发自定义事件 ，理解自定义事件及其触发过程
以下说明可解释自定义的事件的自定义触发过程: 直接上代码,内含说明(界面是两个文本框textbox1,textbox2,和一个button1,界面的Load事件,button的click事件) For ...
- [实践篇]13.16 vmm_service监听qvm事件原理及其自定义事件详解
[QNX Hypervisor 2.2用户手册]目录(完结) 前面通过[实践篇]13.11扒一扒qvm与vmm之间的那点事儿,我们了解到vmm_service通过监听vmm设备节点,来接收qvm的状态 ...
- 线程同步 -事件Event、临界区对象CriticalSection
事件Event: 基本函数: 全局对象:HANDLE g_hEvent 创建事件对象:g_hEvent=CreateEvent(NULL,FALSE,FALSE,NULL) 重置状态为无信号:Rese ...
- html 自定义js,js 自定义事件
js怎么自定义事件,并能让用on事件监听 你这个问题全部内容应该是如下吧: 在视频播放的时候,能够用on监听事件的触发,如下: player.on('pause',function(){ consol ...
- python自定义事件event的含义_事件Event详解
简介 事件模型很多编程语言中都有广泛的应用,在饥荒中也一样.许多component在执行一些核心函数时都会顺带触发事件,比如combat在攻击到目标是就会触发onhitother事件.这时候如果监听该 ...
最新文章
- java 远程共享_【原创】(扫盲)远程共享对象SharedObject的用法
- LeetCode 74. Search a 2D Matrix--有序矩阵查找--python,java,c++解法
- PHP通过header实现文本文件的下载
- python作用域与LEGB规则
- 文本光标，高亮选中一些出来
- ContentProvider和Uri详解
- Short, Integer, Long缓存
- 分享：BlackHole开发日记-Java守护进程、Signal处理
- ISO 12233和SFR
- arcgis地理数据库之创建sde用户
- 磁珠和去耦电感的区别
- Picker 选择器
- 屏蔽Mac版迅雷更新提醒
- Harbour.Space Scholarship Contest 2021-2022 (Div. 1 + Div. 2) -29
- Krita像素画教程
- jsp+ssm+mysql实现图书馆预约占座管理系统项目
- 计算机自然语言处理专业排名,请大牛们推荐一些计算机专业自然语言处理或人工智能方面比较好的EI期刊 - 论文投稿 - 小木虫 - 学术 科研 互动社区...
- 工银亚洲汇款手续费记录(x5)
- 中小型企业网络架构实验
- 使用 Tokio 实现 Actor 系统