事件觸發器就是用來觸發某個元素下的某個事件,IE下fireEvent方法,高級瀏覽器(chrome,firefox等)有dispatchEvent方法。
一般我們在元素上綁定事件後,是靠用戶在這些元素上的鼠標行爲來捕獲或者觸發事件的,或者自帶的瀏覽器行爲事件,比如click,mouseover,load等等,有些時候我們需要自定義事件或者在特定的情況下需要觸發這些事件。這個時候我們可以使用IE下fireEvent方法,高級瀏覽器(chrome,firefox等)有dispatchEvent方法。
例如在ie下看看這個例子:
02 |
document.attachEvent( 'ondataavailable' , function (event)
{ |
03 |
alert(event.eventType); |
05 |
var obj=document.getElementById( "obj" ); |
07 |
obj.attachEvent( 'onclick' , function (event)
{ |
08 |
alert(event.eventType); |
11 |
var event
= document.createEventObject(); |
12 |
event.eventType
= 'message' ; |
14 |
document.fireEvent( 'ondataavailable' ,
event); |
16 |
document.getElementById( "test" ).onclick
= function ()
{ |
17 |
obj.fireEvent( 'onclick' ,
event); |
fireEvent的官方文檔:http://msdn.microsoft.com/en-us/library/ms536423(v=vs.85).aspx
createEventObject的官方文檔:http://msdn.microsoft.com/en-us/library/ie/ms536390(v=vs.85).aspx
再看看高級瀏覽器(chrome,firefox等)的例子:
02 |
document.addEventListener( 'ondataavailable' , function (event)
{ |
03 |
alert(event.eventType); |
05 |
var obj
= document.getElementById( "obj" ); |
07 |
obj.addEventListener( 'click' , function (event)
{ |
08 |
alert(event.eventType); |
11 |
var event
= document.createEvent( 'HTMLEvents' ); |
14 |
event.initEvent( "ondataavailable" , true , true ); |
15 |
event.eventType
= 'message' ; |
17 |
document.dispatchEvent(event); |
19 |
var event1
= document.createEvent( 'HTMLEvents' ); |
20 |
event1.initEvent( "click" , true , true ); |
21 |
event1.eventType
= 'message' ; |
23 |
document.getElementById( "test" ).onclick
= function ()
{ |
24 |
obj.dispatchEvent(event1); |
在實際封裝中沒這麼簡單,看了一下jQuery.event.trigger的源碼(http://www.css88.com/tool/jQuerySourceViewer/#v=1.7.2&fn=jQuery.event.trigger),是通過模擬來實現了,給某元素綁定一個事件處理函數,如果有觸發事件的實際操作就會執行相應的事件處理函數,所以要達到事件觸發器的功能只要獲取到相應的事件處理函數然後執行。