您現在的位置是:網站首頁>Javascriptjavascript模擬鼠標點擊事件的實例代碼
javascript模擬鼠標點擊事件的實例代碼
宸宸2024-03-01【Javascript】208人已圍觀
給尋找編程代碼教程的朋友們精選了相關的編程文章,網友師曉燕根據主題投稿了本篇教程內容,涉及到js、觸發、模擬點擊、事件、javascript觸發模擬鼠標點擊事件相關內容,已被638網友關注,相關難點技巧可以閲讀下方的電子資料。
javascript觸發模擬鼠標點擊事件
事件觸發器就是用來觸發某個元素下的某個事件,IE下fireEvent方法,高級瀏覽器(chrome,firefox等)有dispatchEvent方法。
一般我們在元素上綁定事件後,是靠用戶在這些元素上的鼠標行爲來捕獲或者觸發事件的,或者自帶的瀏覽器行爲事件,比如click,mouseover,load等等,有些時候我們需要自定義事件或者在特定的情況下需要觸發這些事件。這個時候我們可以使用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'; //觸發document上綁定的自定義事件ondataavailable document.fireEvent('ondataavailable', event); //觸發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個蓡數: // 事件類型,是否冒泡,是否阻止瀏覽器的默認行爲 event.initEvent("ondataavailable", true, true); event.eventType = 'message'; //觸發document上綁定的自定義事件ondataavailable document.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的源碼
是通過模擬來實現了,給某元素綁定一個事件処理函數,如果有觸發事件的實際操作就會執行相應的事件処理函數,所以要達到事件觸發器的功能衹要獲取到相應的事件処理函數然後執行。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持碼辳之家。