原生js實現trigger方法

ivydom 發布于2019-05-23 17:34 / 810人閱讀

摘要：觸發事件接下來實現在獲取的節點上直接調用方法為增加方法為增加方法如上所示獲取的節點，卻并未存在方法，這是由于通過獲取到的是實例而非。而以上的方法僅限于直接綁定至的事件，預綁定的事件無法通過來執行且需要其它方法協同處理。

事件綁定成功之后，事件的執行函數就如同待字閨中的小姑娘。除了由坐在電腦前的大叔們用鍵盤、鼠標等硬件行為觸發外，需要在代碼中直接調用又該如何實現？

首先需要將事件綁定至指定DOM節點上

// 在一個節點上綁定一個事件
let test = document.createElement("div");
test.id = "test";
test.innerHTML = "測試事件";
document.body.appendChild(test);
test.addEventListener("mousedown", function(){
    console.log("hello jTool");
}, false)

事件綁定成功之后，事件的執行函數就如同待字閨中的小姑娘。除了由坐在電腦前的大叔們用鍵盤、鼠標等硬件行為觸發外，需要在代碼中直接調用又該如何實現？在 jQuery 中的事件類中包含一個trigger方法，我之前寫的類庫 jTool 中同樣也實現了該方法，下面就以 jTool 的視角來說明下 trigger 如何實現。

綁定事件時使用 DOM 對象的 .addEventListener() 方法，而實現 trigger 則是使用 DOM 對像的 .dispatchEvent() 方法。

.dispatchEvent() 需要以參數形式傳入被派發的事件對象，該事件對象可以通過 javascript 的全局構造函數 Event。

// 觸發事件
var myEvent = new Event("mousedown");
test.dispatchEvent(myEvent); // => true

接下來實現在獲取的節點上直接調用 .trigger() 方法

1.為Element 增加trigger方法

Element.prototype.trigger = function(eventName){
    this.dispatchEvent(new Event(eventName));
}
let target = document.querySelector("#test");  // Element
target.trigger("mousedown"); // => "hello jTool"

2.為 NodeList 增加 trigger 方法

target = document.querySelectorAll("#test"); // NodeList
target.trigger("mousedown");  // => Uncaught TypeError: target.trigger is not a function

如上所示 .querySelectorAll() 獲取的節點，卻并未存在 .trigger() 方法，這是由于通過 .querySelectorAll() 獲取到的是 NodeList 實例而非 Element。

NodeList.prototype.trigger = function(eventName){
    [].forEach.call(this, function(item, index){
        item.dispatchEvent(new Event(eventName));
    });
}
target = document.querySelectorAll("#test"); // NodeList
target.trigger("mousedown");  // => hello jTool

而以上的方法僅限于直接綁定至 DOM 的事件，預綁定的事件,無法通過 new Event().dispatchEvent() 來執行, 且需要其它方法協同處理。

以上代碼是在進行jtool類庫編碼時實踐出來的方式，歡迎star

云服務器 GPU云服務器原生js實現 ajax原生js實現原生js實現addclass 原生js實現ajax

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/7393.html

原生js實現trigger方法

摘要：綁定事件時使用對象的方法，而實現則是使用對像的方法。需要以參數形式傳入被派發的事件對象，該事件對象可以通過的全局構造函數。而以上的方法僅限于直接綁定至的事件，預綁定的事件無法通過來執行且需要其它方法協同處理。事件綁定成功之后，事件的執行函數就如同待字閨中的小姑娘。除了由坐在電腦前的大叔們用鍵盤、鼠標等硬件行為觸發外，需要在代碼中直接調用又該如何實現？首先需要將事件綁定至指定DOM節...

fox_soyoung 2019-08-26 13:53 評論0 收藏0
jQuery源碼解析之trigger()

摘要：一和的作用和區別觸發被選元素上的指定事件以及事件的默認行為比如表單提交不會引起事件比如表單提交的默認行為觸發所有匹配元素的指定事件只觸發第一個匹配元素的指定事件會冒泡不會冒泡二被點擊了作用看一源碼觸發事件，是自定義事件的額外參數源碼行解析本 showImg(https://segmentfault.com/img/remote/1460000019375685); 一、$().trig...

Youngs 2019-08-23 17:56 評論0 收藏0
jQuery 源碼系列（十四）自定義事件

摘要：不過也有自己的一套自定義事件方案。可以和事件拿來對比，他們都是用來模擬和執行監聽的事件。冒泡事件就是就是由內向外冒泡的過程，這個過程不是很復雜。參考解密事件核心自定義設計三解密事件核心模擬事件四本文在上的源碼地址，歡迎來。歡迎來我的專欄查看系列文章。以前，我只知道，只有當對瀏覽器中的元素進行點擊的時候，才會出發 click 事件，其它的事件也一樣，需要人為的鼠標操作。 showIm...

elliott_hu 2019-08-21 11:32 評論0 收藏0
jQuery 事件(三) 事件的綁定和解綁、對象的使用、自定義事件

摘要：事件的綁定和解綁的多事件綁定之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬于快捷處理。由于瀏覽器事件冒泡特性，可以在觸發時把這個事件往上冒泡到上，因為上綁定事件響應，所以能觸發這個動作。事件的綁定和解綁 on()的多事件綁定之前學的鼠標事件，表單事件與鍵盤事件都有個特點，就是直接給元素綁定一個處理函數，所有這類事件都是屬于快捷處理...

niuxiaowei111 2019-08-22 10:53 評論0 收藏0