CustomEvent自定义事件
javascript与HTML之间的交互是通过事件来实现的。事件,就是文档或浏览器窗口发生的一些特定的交互瞬间。通常大家都会认为事件是在用户与浏览器进行交互的时候触发的,其实通过javascript我们可以在任何时刻触发特定的事件,并且这些事件与浏览器创建的事件是相同的。
通过createEvent方法,我们可以创建新的Event对象,这个方法接受一个参数eventType,即想获取的Event对象的事件模板名,其值可以为HTMLEvents、MouseEvents、UIEvents以及CustomEvent(自定义事件)。这里我们将以CustomEvent为例子进行讲解。
(1)首先创建自定义事件对象
var event = document.createEvent("CustomEvent");
(2)然后初始化事件对象
event.initCustomEvent(in DOMString type, in boolean canBubble, in boolean cancelable, in any detail);
其中,第一个参数为要处理的事件名
第二个参数为表明事件是否冒泡
第三个参数为表明是否可以取消事件的默认行为
第四个参数为细节参数
例如:event.initCustomEvent("test", true, true, {a:1, b:2}) 表明要处理的事件名为test,事件冒泡,可以取消事件的默认行为,细节参数为一个对象{a:"test", b:"success"}
或者:
var event = new CustomEvent('test', {
bubbles: true,
cancelable: true,
detail: 'xxx',
});
(3)最后触发事件对象
document.dispatchEvent(event);
(4)当然我们需要定义监控test事件的处理程序
document.addEventListener("test", function(e){
var obj = e.detail;
alert(obj.a + " " + obj.b);
});
最后会弹出框显示"test success"
CustomEvent自定义事件的更多相关文章
- 自定义事件javascript
自定义事件 1.event构造函数自定义事件 /* * 自定义一个名为build的事件 * bubbles :事件是否冒泡 * cancelable:是否阻止事件的默认操作 * composed:指示 ...
- 自定义事件——Event和CustomEvent
之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作 ...
- Qt 自定义事件(三种方法:继承QEvent,然后Send Post就都可以了,也可以覆盖customEvent函数,也可覆盖event()函数)
Qt 自定义事件很简单,同其它类库的使用很相似,都是要继承一个类进行扩展.在 Qt 中,你需要继承的类是 QEvent. 继承QEvent类,你需要提供一个QEvent::Type类型的参数,作为自定 ...
- 自定义事件 Event 、CustomEvent的使用
通过Event和dispathEvents触发自定义事件 <span id="btn">获取</span> <script> var event ...
- js自定义事件CustomEvent、Event、TargetEvent
1.Event Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态. 事件通常与函数结合使用,函数不会在事件发生前被执行! Event的事件都是系统自 ...
- 转 js自定义事件——Event和CustomEvent
之前在学习自定义事件时,在MDN的Event.initEvent()页面顶端有写:该特性已从Web标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性. 作 ...
- javascript和jquey的自定义事件小结
“通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- 如何订阅Form的自定义事件
Window Form类有很多的属性/方法和事件,其中事件属于一种发布订阅模式 .订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主体对象.这个主体对象在自身状态变化时,会通知所 ...
随机推荐
- Codeforces Round #342 (Div. 2) B. War of the Corporations(贪心)
传送门 Description A long time ago, in a galaxy far far away two giant IT-corporations Pineapple and Go ...
- CSS实现正方体旋转
代码如下: <!DOCTYPE html><html lang="en"><head> <meta charset="UT ...
- IHttpModule生命周期
using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...
- 文件夹锁定(Source)
文件夹锁定(Source)private void Lock(string folderPath){ try { string adminUserName = Environ ...
- Canvas绘制渐变
1.绘制线性渐变 Canvas提供了用于创建线性渐变的函数createLinearGradient(x0,y0,x1,y1),坐标点(x0,y0)是起点 ,(x1,y1)是终点 创建一个渐变色 var ...
- rqnoj378 约会计划
题目描述 cc是个超级帅哥,口才又好,rp极高(这句话似乎降rp),又非常的幽默,所以很多mm都跟他关系不错.然而,最关键的是,cc能够很好的调解各各妹妹间的关系.mm之间的关系及其复杂,cc必须严格 ...
- UI第九节——UIStepper
- (void)viewDidLoad { [super viewDidLoad]; // 实例化UIStepper,大小是固定的 UIStepper *stepper = ...
- 《UNIX环境高级编程第三版》apue.h等源码文件的编译安装
操作系统:Ubuntu 12/14 1.下载书中的源代码:点击下载 2.编译 tar -zxvf *.tar.gz cd ./apue.3e make 报错: can,t find -lbsd 解决办 ...
- jvm的内部体系结构浅析
转自:http://www.cnblogs.com/evan2012/archive/2012/05/09/2489417.html 1.jvm的内部体系结构浅析 2.jvm的几个运行时数据区域 3. ...
- php gettext 多语言翻译
1.在window与linux下的多语言切换有些区别,主要putenv的设置区别. 参考链接:http://www.cnblogs.com/sink_cup/archive/2013/11/20/ub ...