| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> js原生3种自定义事件方法(createEvent、init |initMouse |UIEvent和Event和CustomEvent)与触发自定义事件(dispatchEvent) -> 正文阅读 |
|
[JavaScript知识库]js原生3种自定义事件方法(createEvent、init |initMouse |UIEvent和Event和CustomEvent)与触发自定义事件(dispatchEvent) |
目录 dom.dispatchEvent(eventObject) dom.initEvent(eventName, canBubble, preventDefault) dom.initUIEvents(eventName, canBubble, preventDefault,view, detail) CustomEvent(eventName,eventInit) 触发自定义事件
|
参数 | 事件接口 | 初始化方法 |
---|---|---|
HTMLEvents | HTMLEvent | initEvent() |
MouseEvents | MouseEvent | initMouseEvent() |
UIEvents | UIEvent | initUIEvent() |
初始化createEvent('HTMLEvents')返回的事件。eventName代表自定义的事件名,canBubble表示是否可以触发冒泡,preventDefault表示是否取消触发默认事件。
在鼠标事件创建时初始化其属性的值。初始化createEvent('MouseEvents')返回的事件。前3个参数和上面相同,后面参数介绍见下面链接:
MouseEvent.initMouseEvent() - Web API 接口参考 | MDN
在创建 UI 事件后对其进行初始化。初始化createEvent('UIEvents')返回的事件。前3个参数和上面相同,view是WindowProxy与事件相关联的,detail是unsigned long
? 指定有关事件的一些详细信息,具体取决于事件的类型。对于鼠标事件,它表示鼠标在给定的屏幕位置上被点击了多少次。
//选择dom节点
var dom = document.getElementById('')
//dom节点上绑定自定义事件abc
dom.addEventListener('abc', function (event) {
console.log(event)
}, false);
// 创建事件
var evt = document.createEvent("UIEvents");
// 初始化事件为自定abc事件
evt.initUIEvent("abc", false, false);
// 触发事件
dom.dispatchEvent(evt);
触发结果如下图:
自定义事件名对应type,bubbles对应是否可以冒泡,defaultPrevented对应是否可以触发默认事件。?
创建一个新的Event对象。以这种方式创建的事件称为合成事件,与浏览器触发的事件相反,并且可以由脚本调度。
参数:typeArg
表示事件名称的字符串,eventInit
?为一个具有以下可选字段的对象:
bubbles
?可选,指示事件是否冒泡的布尔值,默认值为?false。
cancelable
?可选,一个布尔值,指示是否取消默认事件,默认值为false。
composed
?可选,一个布尔值,指示事件是否会触发影子根之外的侦听器(Event.composed有关更多详细信息,请参见),默认值为false。
var evt = new Event("look", {"bubbles":true, "cancelable":false});
var dom = document
dom.addEventListener('look', function (event) {
console.log(event)
}, false);
document.dispatchEvent(evt);
?触发结果如下图:
创建一个新的?CustomEvent对象。
参数:typeArg
表示事件名称的字符串,eventInit
?为一个具有以下可选字段的对象:
bubbles
?可选,指示事件是否冒泡的布尔值,默认值为?false。
cancelable
?可选,一个布尔值,指示是否取消默认事件,默认值为false。
detail
?可选,默认为null
,属于 any 类型,这是与事件关联的事件相关值。
var evt =new CustomEvent("cat", {"detail":{"hazcheeseburger":true}});
var dom = document
dom.addEventListener('cat', function (event) {
console.log(event)
}, false);
dom.dispatchEvent(evt);
?触发结果如下图:
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 | -2024/11/24 2:31:10- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |