建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家介紹使用JavaScript怎么實現(xiàn)一個trigger方法，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
首先需要將事件綁定至指定DOM節(jié)點上
// 在一個節(jié)點上綁定一個事件
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ù)就如同待字閨中的小姑娘。除了由坐在電腦前的大叔們用鍵盤、鼠標等硬件行為觸發(fā)外，需要在代碼中直接調(diào)用又該如何實現(xiàn)？在 jQuery 中的事件類中包含一個trigger方法， 我之前寫的類庫 jTool 中同樣也實現(xiàn)了該方法， 下面就以 jTool 的視角來說明下 trigger 如何實現(xiàn)。
綁定事件時使用 DOM 對象的 .addEventListener() 方法， 而實現(xiàn) trigger 則是使用 DOM 對像的 .dispatchEvent() 方法。
.dispatchEvent() 需要以參數(shù)形式傳入被派發(fā)的事件對象， 該事件對象可以通過 javascript 的全局構造函數(shù) Event。
// 觸發(fā)事件
var myEvent = new Event('mousedown');
test.dispatchEvent(myEvent); // => true接下來實現(xiàn)在獲取的節(jié)點上直接調(diào)用 .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() 獲取的節(jié)點， 卻并未存在 .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關于使用JavaScript怎么實現(xiàn)一個trigger方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
文章名稱：使用JavaScript怎么實現(xiàn)一個trigger方法-創(chuàng)新互聯(lián)
瀏覽地址：http://www.dlmjj.cn/article/eodsh.html
