javascript事件触发器fireEvent和dispatchEvent
javascript事件触发器fireEvent和dispatchEvent
事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。
一般我们在元素上绑定事件后,是靠用户在这些元素上的鼠标行为来捕获或者触发事件的,或者自带的浏览器行为事件,比如click,mouseover,load等等,有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法,高级浏览器(chrome,firefox等)有dispatchEvent方法。
例如在ie下看看这个例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
//document上绑定自定义事件ondataavailable document.attachEvent( 'ondataavailable' , function (event) { alert(event.eventType); }); var obj=document.getElementById( "obj" ); //obj元素上绑定click事件 obj.attachEvent( 'onclick' , function (event) { alert(event.eventType); }); //调用document对象的createEventObject方法得到一个event的对象实例。 var event = document.createEventObject(); event.eventType = 'message' ; //触发document上绑定的自定义事件ondataavailable document.fireEvent( 'ondataavailable' , event); //触发obj元素上绑定click事件 document.getElementById( "test" ).onclick = function () { obj.fireEvent( 'onclick' , event); }; |
再看看高级浏览器(chrome,firefox等)的例子:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//document上绑定自定义事件ondataavailable document.addEventListener( 'ondataavailable' , function (event) { alert(event.eventType); }, false ); var obj = document.getElementById( "obj" ); //obj元素上绑定click事件 obj.addEventListener( 'click' , function (event) { alert(event.eventType); }, false ); //调用document对象的 createEvent 方法得到一个event的对象实例。 var event = document.createEvent( 'HTMLEvents' ); // initEvent接受3个参数: // 事件类型,是否冒泡,是否阻止浏览器的默认行为 event.initEvent( "ondataavailable" , true , true ); event.eventType = 'message' ; //触发document上绑定的自定义事件ondataavailable document.dispatchEvent(event); var event1 = document.createEvent( 'HTMLEvents' ); event1.initEvent( "click" , true , true ); event1.eventType = 'message' ; //触发obj元素上绑定click事件 document.getElementById( "test" ).onclick = function () { obj.dispatchEvent(event1); }; |
在实际封装中没这么简单,看了一下jQuery.event.trigger的源码,是通过模拟来实现了,给某元素绑定一个事件处理函数,如果有触发事件的实际操作就会执行相应的事件处理函数,所以要达到事件触发器的功能只要获取到相应的事件处理函数然后执行。
javascript事件触发器fireEvent和dispatchEvent的更多相关文章
- js事件触发器fireEvent和dispatchEvent
转自:https://www.cnblogs.com/tiger95/p/6962059.html 事件触发器就是用来触发某个元素下的某个事件,IE下fireEvent方法,高级浏览器(chrome, ...
- js事件触发器 dispatchEvent()
[其实就是自动触发事件,而非手动(交互)触发事件] dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触发器来使用的,那么什么是事件触发器?就是触发事件的东西.可能有人 ...
- 事件触发器-----dispatchEvent
不要被标题蒙蔽了,今天的重点不是论述事件触发器,而是说一下dispatchEvent这个东西.好了,先简单做个铺垫,dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触 ...
- JavaScript事件模型及事件代理
事件模型 JavaScript事件使得网页具备互动和交互性,我们应该对其深入了解以便开发工作,在各式各样的浏览器中,JavaScript事件模型主要分为3种:原始事件模型.DOM2事件模型.IE事件模 ...
- JavaScript事件详解-Zepto的事件实现(二)【新增fastclick阅读笔记】
正文 作者打字速度实在不咋地,源码部分就用图片代替了,都是截图,本文讲解的Zepto版本是1.2.0,在该版本中的event模块与1.1.6基本一致.此文的fastclick理解上在看过博客园各个大神 ...
- 总结JavaScript事件机制
JavaScript事件模型 在各种浏览器中存在三种事件模型: 原始事件模型 , DOM2事件模型 , IE事件模型. 其中原始的事件模型被所有浏览器所支持,而DOM2中所定义的事件模型目前被除了IE ...
- Javascript事件机制兼容性解决方案
本文的解决方案可以用于Javascript native对象和宿主对象(dom元素),通过以下的方式来绑定和触发事件: 或者 var input = document.getElementsByTag ...
- 重温javascript事件机制
以前用过一段时间的jquery感觉太方便,太强大了,各种动画效果,dom事件.创建节点.遍历.控件及UI库,应有尽有:开发文档也很多,网上讨论的问题更是甚多,种种迹象表明jquery是一个出色的jav ...
- JavaScript事件详解-zepto的事件实现
zepto的event 可以结合上一篇JavaScript事件详解-原生事件基础(一)综合考虑源码暂且不表,github里还有中文网站都能下到最新版的zepto.整个event模块不长,274行,我们 ...
随机推荐
- LeetCode--094--二叉树的中序遍历(python)
递归 # Definition for a binary tree node. # class TreeNode: # def __init__(self, x): # self.val = x # ...
- JS循环结构
什么是循环结构? 反复一遍又一遍做着相同(相似)的事情 循环结构的两大要素? 循环条件:什么时候开始,什么时候结束 循环操作:循环体,循环过程中 做了什么 一.while语句 while语句 属于前测 ...
- SetwindowText 之线程阻塞
示意代码: CriticalSection g_Section; CDialog g_Dlg; // 工作线程函数UINT TreadFunc_A(PVOID para){ Sleep(10); g_ ...
- 有关OI的思维导图
看到这张图 我仿佛掉进了知识的深渊QwQ
- 10.1 ‘The server's host key is not cached in the registry’
10.1 ‘The server's host key is not cached in the registry’ This error message occurs when PuTTY conn ...
- vb语法
If IsNull(rs(0)) = False Then picPath = rs(0) End If 判断查询数据库结果集是否为null, 如果用rs(0)则会报错,这样获取不到这条记录的null ...
- 用Vue来实现音乐播放器(十六):滚动列表的实现
滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 <template> < ...
- Android studio 不能创建Activity等文件
这是我之前安装Android studio的一系列问题:http://tieba.baidu.com/p/5921373177 1. 不能创建Activity等许多文件: 2. 工程运行不了: 3. ...
- Openssl ASN.1 说明一 分享
[引言]ASN.1全称为Abstract Syntax NotationOne,是一种描述数字对象的方法和标准.openssl的编码方法就是基于该标准的,目前,很多其他软件的编码方法也是基于该标准.对 ...
- 【openstf】自己的云测平台——mac安装openstf
openstf的github地址:https://github.com/openstf/stf 上图可以清晰看出openstf的使用场景和效果 openstf是一个web应用程序,用于远程调试智能 ...