JavaScript教程：[10]自定义DOM事件

来源：互联网 2023-03-17 00:48:09 222

javascript在DOM3级中新增了自定义事件，只要是支持DOM3的浏览器都可以自定义事件，使用createEvent("CustomEvent")方法进行创建自定义事件，下边详细举例说明一下

工具/原料

首先，按照惯例，创建一个备用的html简单文件，主要是里边的div元素，为了后面通过id获取并添加事件上去。如图

运行这个简单的HTML文件后，打开谷歌开发者工具，在控制台编写javascript演示代码如图，获取div元素

JavaScript教程：[10]自定义DOM事件

在div元素上添加自定义事件“myevent”，就是给div添加onmyevent方法，如图

JavaScript教程：[10]自定义DOM事件

3此文章未经授权抓取自百度经验

通过createEvent()方法创建自定义方法：var event=document.createEvent("CustomEvent")

JavaScript教程：[10]自定义DOM事件

创建好方法后，将返回对象方法设置好事件属性，initCustemEvent(type,bubbles,cancelable,detail)，type表示事件类型，bubbles表示是否应该冒泡，cancelable则为是否取消事件默认方法，detail为保存在event事件中的字符串属性。

JavaScript教程：[10]自定义DOM事件

最后使用dispatchEvent（）将自定义的event事件派发给div元素

JavaScript教程：[10]自定义DOM事件

回车运行即可看到效果

JavaScript教程：[10]自定义DOM事件

判断脚本是否加载...

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！