快捷導(dǎo)航

javascript觸發(fā)模擬鼠標(biāo)點(diǎn)擊事件

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

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

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

一般我們?cè)谠厣辖壎ㄊ录螅强坑脩粼谶@些元素上的鼠標(biāo)行為來(lái)捕獲或者觸發(fā)事件的，或者自帶的瀏覽器行為事件，比如click，mouseover，load等等，有些時(shí)候我們需要自定義事件或者在特定的情況下需要觸發(fā)這些事件。這個(gè)時(shí)候我們可以使用IE下fireEvent方法，高級(jí)瀏覽器（chrome,firefox等）有dispatchEvent方法。

例如在ie下看看這個(gè)例子：

//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);
});
//調(diào)用document對(duì)象的createEventObject方法得到一個(gè)event的對(duì)象實(shí)例。
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的官方文檔

再看看高級(jí)瀏覽器（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);
//調(diào)用document對(duì)象的 createEvent 方法得到一個(gè)event的對(duì)象實(shí)例。
var event = document.createEvent('HTMLEvents');
// initEvent接受3個(gè)參數(shù)：
// 事件類(lèi)型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為
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);
};

在實(shí)際封裝中沒(méi)這么簡(jiǎn)單，看了一下jQuery.event.trigger的源碼

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: