前言
事件綁定成功之后，事件的執行函數就如同待字閨中的小姑娘。除了由坐在電腦前的大叔們用鍵盤、鼠標等硬件行為觸發外，需要在代碼中直接調用又該如何實現？
首先需要將事件綁定至指定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'); // Elementtarget.trigger('mousedown'); // => 'hello jTool'2.為 NodeList 增加 trigger 方法
target = document.querySelectorAll('#test'); // NodeListtarget.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'); // NodeListtarget.trigger('mousedown'); // => hello jTool 而以上的方法僅限于直接綁定至 DOM 的事件，預綁定的事件,無法通過 new Event().dispatchEvent() 來執行, 且需要其它方法協同處理。
以上代碼是在進行jtool類庫編碼時實踐出來的方式，歡迎star
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對VeVb武林網的支持。
新聞熱點
疑難解答
