原生js實現trigger方法

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

首先須要將事件綁定至指定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