内容简介:在 JS 中模拟事件指的是模拟 JS 中定义的一些事件,例如点击事件,键盘事件等。自定义事件指的是创建一个自定义的,JS 中之前没有的事件。接下来分别说一下创建这两种事件的方法。
在 JS 中模拟事件指的是模拟 JS 中定义的一些事件,例如点击事件,键盘事件等。
自定义事件指的是创建一个自定义的,JS 中之前没有的事件。
接下来分别说一下创建这两种事件的方法。
创建自定义事件
创建自定义事件可以使用 Event 和 CustomEvent 两种方法,接下来分别做一下介绍。
1. 利用 Event
Event 用法
event = new Event(typeArg, eventInit);
typeArg:指定事件类型,传递一个字符串。这里的事件类型指的是像点击事件(click)、提交事件(submit)、加载事件(load)等等。
eventInit:可选,也可以以键值对的形式设置以下属性。
bubbles:事件是否支持冒泡,传递一个boolean类型的参数,默认值为false。
cancelable:是否可取消事件的默认行为,传递一个boolean类型的参数,默认值为false。
composed:事件是否会触发shadow DOM(阴影DOM)根节点之外的事件监听器,传递一个boolean类型的参数,默认值为false。
示例
<section id="Event"> <div id="root"></div> <script type="text/javascript"> // 创建事件对象 const newEvent = new Event('customType', { bubbles:true,cancelable:true,composed:true }) // 获取 DOM 元素 const div = document.getElementById('root') // 绑定事件对象 document.addEventListener('customType', () => { alert('自定式 customType 事件执行了') }) // 触发事件对象(真正开发中可以满足某个条件后才触发事件) div.dispatchEvent(newEvent) </script> </section>
2. 利用 CustomEvent
CustomEvent()
可以像 Event()
那样使用,但它也可以在 Web Workers 中使用(与主线程分离的另一个线程),可以传递跟事件关联的相关值(detail),detail 的默认值为null,类型为any(也就是说可以传递任意类型的参数),这个值就是和事件相关联的值。
通过示例可以很明白地看出来两者的区别。
<section id="CustomEvent"> <div id="root"></div> <script type="text/javascript"> // 创建事件对象 const newEvent = new CustomEvent('customType', { bubbles:true, cancelable:true, composed:true, detail: { log: '我是 detail 属性中的' } }) // 获取 DOM 元素 const div = document.getElementById('root') // 绑定事件对象 document.addEventListener('customType', () => { // 打印 event.detail.log 的值 alert(`自定式 customType 事件执行了,${event.detail.log}`) }) // 触发事件对象(真正开发中可以满足某个条件后才触发事件) div.dispatchEvent(newEvent) </script> </section>
可以看到在 event 对象中会有 detail 属性,我们可以输出 detail 属性中的内容。
创建模拟事件
想要模拟用户的点击等行为,可以通过模拟事件来实现。
步骤:
1)在 document 对象上使用 createEvent() 方法创建 event 对象,这个方法接收一个创建类型的字符串,主要有下面四种。
- UIevents:一般化的 UI 事件,鼠标和键盘事件都继承自 UI 事件,DOM3 中是 UIEvent。
- MouseEvents:鼠标事件,DOM3 中是 MouseEvent。
- MutationEvents:DOM 变动事件,DOM3 中是 MutationEvent。
- HTMLEvents:HTML 事件。
使
2)初始化事件对象
在使用 document.createEvent()
创建出一个 event 对象之后,event 对象上会得到一个初始化的属性,不同类型的 Event 对象属性名不同,例如 MouseEvent
类型对应的属性就是 initMouseEvent
.
3)触发事件
在实际开发中当满足一定条件后我们可以使用 DOM元素.dispatchEvent(event)
来触发事件。
接下来以模拟鼠标点击事件为例,说明一下上面的各个步骤。定义了一个 div 元素,绑定了一个 click 事件处理程序,内容是 alert('我不是用户点击的')
,然后再模拟触发 click 事件,可以发现即使在用户不点击时也可以弹出 '我不是用户点击的'
.
<section id="SimulateEvent"> <div id="root"></div> <script type="text/javascript"> // 获取 DOM 元素 const div = document.getElementById('root') // 绑定事件处理程序 div.addEventListener('click', () => { alert('我不是用户点击的') }, false) // 创建鼠标事件对象 const event = document.createEvent('MouseEvents') // 初始化事件对象 event.initMouseEvent('click', true, true, document.defaultView) // 触发事件对象(真正开发中可以满足某个条件后才触发事件) div.dispatchEvent(event) </script> </section>
从上面的结果可以看到,即使我们没有点击 div 元素,它也会执行绑定的 click 的事件处理程序,原因就在于我们通过程序模拟了点击事件。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 详解JS事件 - 事件模型/事件流/事件代理/事件对象/自定义事件
- 绑定自定义事件
- JS 自定义事件如此简单
- Flutter自定义折线图并添加点击事件
- Android 自定义View:处理事件分发(四)
- 1.22 JQuery5:绑定自定义事件
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
图片转BASE64编码
在线图片转Base64编码工具
Base64 编码/解码
Base64 编码/解码