前言

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

首先需要將事件綁定至指定DOM節(jié)點(diǎn)上

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

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

綁定事件時(shí)使用 DOM 對(duì)象的 .addEventListener() 方法， 而實(shí)現(xiàn) trigger 則是使用 DOM 對(duì)像的 .dispatchEvent() 方法。

.dispatchEvent() 需要以參數(shù)形式傳入被派發(fā)的事件對(duì)象， 該事件對(duì)象可以通過 javascript 的全局構(gòu)造函數(shù) Event。

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

接下來實(shí)現(xiàn)在獲取的節(jié)點(diǎn)上直接調(diào)用 .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() 獲取的節(jié)點(diǎn)， 卻并未存在 .trigger() 方法， 這是由于通過 .querySelectorAll() 獲取到的是 NodeList 實(shí)例而非 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 的事件，預(yù)綁定的事件,無法通過 new Event().dispatchEvent() 來執(zhí)行, 且需要其它方法協(xié)同處理。

以上代碼是在進(jìn)行jtool類庫編碼時(shí)實(shí)踐出來的方式，歡迎star

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)錯(cuò)新站長站的支持。