【javascript】DOM模拟事件和自定义事件

╰半橙微兮° 2022-05-24 05:10 319阅读 0赞

事件，就是网页中某一个特别值得关注的瞬间。

事件经常由用户操作或通过其他浏览器功能来触发。

但是也可以**使用Javascript在任意时刻触发特定的事件，这个时候的事件和浏览器创建的事件一样。 也就是说这些事件还是有冒泡等属性，而且浏览器也会响应该事件去执行相应的事件处理程序。**

我们来跑一个最简单的例子，比如现在页面有一个按钮，长这样：

< button id= "myBtn" >click me! </ button >

我们增加一个点击事件处理程序：

// 事件处理

document. getElementById( 'myBtn'). addEventListener( 'click', () =>\{

console. log( 'hi, you trigger the click event')

\})

然后我们在页面加载完成之后去模拟一个点击事件。

//模拟一个点击事件

var btn = document. getElementById( 'myBtn')

// good

// 以前是通过document.createEvent()来创建事件，不过后来被废弃了，现在使用Event()构造函数

var event = new MouseEvent( 'click') //MouseEvent继承自UIEvent

//触发事件

btn. dispatchEvent( event)

这样在页面加载完成之后【我们没有点击按钮】，但是在console里面看到了，打印信息，但是我们并没有手动触发这个事件，我们模拟事件已经完成了。

MouseEvent的信息可以参考[MDN detail][] ，MouseEvent是继承自UIEvent，你还可以模拟其他类型的事件，除了鼠标事件，还有ClipboardEvent等等等，可以从[Event][] 页面查看。

其中特殊的一个是[CustomEvent][]，允许我们自定义任意功能的事件。

我们以往知道的事件就是点击事件，获取焦点事件，change事件等，我们可以定义特定类型的事件，比如叫做 'any'。首先事件是绑定到某一个dom target上面。

< div id= "myDiv" >

div with custom event

</ div >

然后添加事件监听：

// 先监听

document. getElementById( 'myDiv'). addEventListener( 'any', ( data) =>\{

console. log( 'your custom event trigger the process method', data)

\})

触发这个自定义事件：

// 触发any 事件

const data = \{ name: 'jackkk', \} // 创建event对象的初始化数据

const customeEvent = new CustomEvent( 'any', \{

bubbles: true,

detail: data

\})

document. getElementById( 'myDiv'). dispatchEvent( customeEvent)

而且我们可以利用事件的冒泡特性，获取到这个data数据，不用在上面的监听程序里面修改代码。相当于，事件触发动作在一处触发，但是我们可以利用冒泡特性，添加多个监听程序。有发布-订阅模式的影子，一个subject的数据变化->dispatchEvent(event),然后通知多个observer，这里的多个observers 可以是 myDiv的任意祖先元素。

所以我们可以写一个另外的监听程序,在这里共享或者说同步获取到数据变化：

document. addEventListener( 'any', ( data) =>\{

console. warn( 'get the data from event dispath', data)

\})

参考： MDN

《JS高程》13.5

*75team*

[MDN detail]: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/MouseEvent
[Event]: https://developer.mozilla.org/zh-CN/docs/Web/API/Event
[CustomEvent]: https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent

发表评论取消回复

表情：

评论列表（有 0 条评论，319人围观）

还没有评论，来说两句吧...

相关阅读

相关自定义事件

![1190185-20190927105629328-286278136.png][] 解释：上面2说的是自定义事件不适合用在爷爷向孙子层层传递数据（隔代）。也不适合兄弟

桃扇骨/ 2023年08月17日 17:10/ 0 赞/ 60 阅读

相关事件绑定、事件传播、事件捕获、事件冒泡、自定义事件

DOM事件三种级别 DOM0级事件 DOM0 级时间分两种，一是直接在标签内直接添加执行语句，二是定义执行函数。 <input type="text" id

布满荆棘的人生/ 2022年12月18日 05:56/ 0 赞/ 251 阅读

相关 Flink自定义事件事件和水位线

目录主类 pom.xml 结果输出 -------------------- 主类 package myflink.EventTime;

刺骨的言语ヽ痛彻心扉/ 2022年10月16日 03:56/ 0 赞/ 158 阅读

相关浅谈JavaScript模拟事件和自定义事件

[http://blog.csdn.net/zhouziyu2011/article/details/65628682][http_blog.csdn.net_zhouziyu

阳光穿透心脏的1/2处/ 2022年07月05日 15:07/ 0 赞/ 185 阅读

相关 java事件处理机制自定义事件

ava中的事件机制的参与者有3种角色：　　1.event object：事件状态对象，用于listener的相应的方法之中，作为参数，一般存在与listerner的方法之中

桃扇骨/ 2022年06月07日 01:13/ 0 赞/ 225 阅读

相关【javascript】DOM模拟事件和自定义事件

事件，就是网页中某一个特别值得关注的瞬间。事件经常由用户操作或通过其他浏览器功能来触发。但是也可以使用Javascript在任意时刻触发特定的事件，这个时候的事件和浏览

╰半橙微兮°/ 2022年05月24日 05:10/ 0 赞/ 320 阅读

相关前端click事件及自定义事件

响应式页面开发常见的前端响应式开发有3套相应的解决方案： 1. bootstrap 的 columns 布局： 2. 使用全局的rem （页面所有元素

淩亂°似流年/ 2022年05月18日 05:04/ 0 赞/ 180 阅读

相关 jQuery自定义事件

一直以为jQuery的bind只能绑定jQuery中的事件，今天从一本书上看到jQuery的bind也能绑定自定义事件。事实上我们可以通过bind绑定一个自定义事件，然后再

太过爱你忘了你带给我的痛/ 2022年03月28日 11:52/ 0 赞/ 300 阅读

相关 VB 自定义事件和处理

Public Class Form1 Private Sub Service_Synchr(ByVal index As Integer)

冷不防/ 2021年12月24日 14:49/ 0 赞/ 162 阅读

相关 vue——自定义事件

每个 Vue 实例都实现了[事件接口][Link 1]，即：使用 `$on(eventName)` 监听事件使用 `$emit(eventName)` 触发事

﹏ヽ暗。殇╰゛Y/ 2021年09月14日 12:54/ 0 赞/ 380 阅读