javascript觸發(fā)模擬鼠標點擊事件

更新時間：2019年06月26日 16:42:31 作者：zeroxiaozou

這篇文章主要介紹了javascript觸發(fā)模擬鼠標點擊事件,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

事件觸發(fā)器就是用來觸發(fā)某個元素下的某個事件，IE下fireEvent方法，高級瀏覽器（chrome,firefox等）有dispatchEvent方法。

一般我們在元素上綁定事件后，是靠用戶在這些元素上的鼠標行為來捕獲或者觸發(fā)事件的，或者自帶的瀏覽器行為事件，比如click，mouseover，load等等，有些時候我們需要自定義事件或者在特定的情況下需要觸發(fā)這些事件。這個時候我們可以使用IE下fireEvent方法，高級瀏覽器（chrome,firefox等）有dispatchEvent方法。

例如在ie下看看這個例子：

//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';
//觸發(fā)document上綁定的自定義事件ondataavailable
document.fireEvent('ondataavailable', event);
//觸發(fā)obj元素上綁定click事件
document.getElementById("test").onclick = function () {
obj.fireEvent('onclick', event);
};

fireEvent的官方文檔

createEventObject的官方文檔

再看看高級瀏覽器（chrome,firefox等）的例子：

//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個參數(shù)：
// 事件類型，是否冒泡，是否阻止瀏覽器的默認行為
event.initEvent("ondataavailable", true, true);
event.eventType = 'message';
//觸發(fā)document上綁定的自定義事件ondataavailable
document.dispatchEvent(event);
var event1 = document.createEvent('HTMLEvents');
event1.initEvent("click", true, true);
event1.eventType = 'message';
//觸發(fā)obj元素上綁定click事件
document.getElementById("test").onclick = function () {
obj.dispatchEvent(event1);
};

在實際封裝中沒這么簡單，看了一下jQuery.event.trigger的源碼

是通過模擬來實現(xiàn)了，給某元素綁定一個事件處理函數(shù)，如果有觸發(fā)事件的實際操作就會執(zhí)行相應的事件處理函數(shù)，所以要達到事件觸發(fā)器的功能只要獲取到相應的事件處理函數(shù)然后執(zhí)行。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: