码迷,mamicode.com
首页 > 编程语言 > 详细

javascript事件触发器fireEvent和dispatchEvent

时间:2017-06-08 13:11:13      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:order   sage   rip   att   string   java   定义   ring   title   

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"truetrue);
event.eventType = ‘message‘;
//触发document上绑定的自定义事件ondataavailable
document.dispatchEvent(event);
var event1 = document.createEvent(‘HTMLEvents‘);
event1.initEvent("click"truetrue);
event1.eventType = ‘message‘;
//触发obj元素上绑定click事件
document.getElementById("test").onclick = function () {
obj.dispatchEvent(event1);
};

在实际封装中没这么简单,看了一下jQuery.event.trigger的源码,是通过模拟来实现了,给某元素绑定一个事件处理函数,如果有触发事件的实际操作就会执行相应的事件处理函数,所以要达到事件触发器的功能只要获取到相应的事件处理函数然后执行。

javascript事件触发器fireEvent和dispatchEvent

标签:order   sage   rip   att   string   java   定义   ring   title   

原文地址:http://www.cnblogs.com/tiger95/p/6962059.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!