事件觸發器就是用來觸發某個元素下的某個事件,IE下fireEvent方法,高級瀏覽器(chrome,firefox等)有dispatchEvent方法。
一般我們在元素上綁定事件后,是靠用戶在這些元素上的鼠標行為來捕獲或者觸發事件的,或者自帶的瀏覽器行為事件,比如click,mouseover,load等等,有些時候我們需要自定義事件或者在特定的情況下需要觸發這些事件。這個時候我們可以使用IE下fireEvent方法,高級瀏覽器(chrome,firefox等)有dispatchEvent方法。
例如在ie下看看這個例子:
//document上綁定自定義事件ondataavailabledocument.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上綁定的自定義事件ondataavailabledocument.fireEvent('ondataavailable', event);//觸發obj元素上綁定click事件document.getElementById("test").onclick = function () {obj.fireEvent('onclick', event);};
fireEvent的官方文檔
createEventObject的官方文檔
再看看高級瀏覽器(chrome,firefox等)的例子:
//document上綁定自定義事件ondataavailabledocument.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上綁定的自定義事件ondataavailabledocument.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的源碼
是通過模擬來實現了,給某元素綁定一個事件處理函數,如果有觸發事件的實際操作就會執行相應的事件處理函數,所以要達到事件觸發器的功能只要獲取到相應的事件處理函數然后執行。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答