javascript事件触发器

最新推荐文章于 2024-12-13 20:17:59 发布

原创最新推荐文章于 2024-12-13 20:17:59 发布 · 6.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #DOM

javascript 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用事件触发器在不同浏览器中实现自定义事件的触发。包括IE下的fireEvent方法及高级浏览器如Chrome和Firefox中的dispatchEvent方法，并提供具体示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

事件触发器就是用来触发某个元素下的某个事件，IE下fireEvent方法，高级浏览器（chrome,firefox等）有dispatchEvent方法。

一般我们在元素上绑定事件后，是靠用户在这些元素上的鼠标行为来捕获或者触发事件的，或者自带的浏览器行为事件，比如click，mouseover，load等等，有些时候我们需要自定义事件或者在特定的情况下需要触发这些事件。这个时候我们可以使用IE下fireEvent方法，高级浏览器（chrome,firefox等）有dispatchEvent方法。

差异

事件在在不同浏览器的差异：

IE:

绑定事件 attachEvent

触发事件 fireEvent

注销事件 detachEvent

高级浏览器（chrome,firefox等):

绑定事件 addEventListener

触发事件 dispatchEvent

注销事件 removeEventListener

Example

例如在ie下看看这个例子：



view source

print?


01 //document上绑定自定义事件ondataavailable 


02 document.attachEvent('ondataavailable', function (event) { 


03 alert(event.eventType); 


04 }); 


05 var obj=document.getElementById("obj"); 


06 //obj元素上绑定click事件 


07 obj.attachEvent('onclick', function (event) { 


08 alert(event.eventType); 


09 }); 


10 //调用document对象的createEventObject方法得到一个event的对象实例。 


11 var event = document.createEventObject(); 


12 event.eventType = 'message'; 


13 //触发document上绑定的自定义事件ondataavailable 


14 document.fireEvent('ondataavailable', event); 


15 //触发obj元素上绑定click事件 


16 document.getElementById("test").onclick = function () { 


17 obj.fireEvent('onclick', event); 


18 }; 



再看看高级浏览器（chrome,firefox等）的例子：



view source

print?


01 //document上绑定自定义事件ondataavailable 


02 document.addEventListener('ondataavailable', function (event) { 


03 alert(event.eventType); 


04 }, false); 


05 var obj = document.getElementById("obj"); 


06 //obj元素上绑定click事件 


07 obj.addEventListener('click', function (event) { 


08 alert(event.eventType); 


09 }, false); 


10 //调用document对象的 createEvent 方法得到一个event的对象实例。 


11 var event = document.createEvent('HTMLEvents'); 


12 // initEvent接受3个参数： 


13 // 事件类型，是否冒泡，是否阻止浏览器的默认行为 


14 event.initEvent("ondataavailable", true, true); 


15 event.eventType = 'message'; 


16 //触发document上绑定的自定义事件ondataavailable 


17 document.dispatchEvent(event); 


18   


19 var event1 = document.createEvent('HTMLEvents'); 


20 event1.initEvent("click", true, true); 


21 event1.eventType = 'message'; 


22 //触发obj元素上绑定click事件 


23 document.getElementById("test").onclick = function () { 


24 obj.dispatchEvent(event1); 


25 };