成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

原生js實(shí)現(xiàn)trigger方法

ivydom / 817人閱讀

摘要：觸發(fā)事件接下來(lái)實(shí)現(xiàn)在獲取的節(jié)點(diǎn)上直接調(diào)用方法為增加方法為增加方法如上所示獲取的節(jié)點(diǎn)，卻并未存在方法，這是由于通過(guò)獲取到的是實(shí)例而非。而以上的方法僅限于直接綁定至的事件，預(yù)綁定的事件無(wú)法通過(guò)來(lái)執(zhí)行且需要其它方法協(xié)同處理。

事件綁定成功之后，事件的執(zhí)行函數(shù)就如同待字閨中的小姑娘。除了由坐在電腦前的大叔們用鍵盤(pán)、鼠標(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 = "測(cè)試事件";
document.body.appendChild(test);
test.addEventListener("mousedown", function(){
    console.log("hello jTool");
}, false)

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

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

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

// 觸發(fā)事件
var myEvent = new Event("mousedown");
test.dispatchEvent(myEvent); // => true
接下來(lái)實(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");  // 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é)點(diǎn)， 卻并未存在 .trigger() 方法， 這是由于通過(guò) .querySelectorAll() 獲取到的是 NodeList 實(shí)例而非 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 的事件，預(yù)綁定的事件,無(wú)法通過(guò) new Event().dispatchEvent() 來(lái)執(zhí)行, 且需要其它方法協(xié)同處理。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/7393.html

相關(guān)文章

  • 原生js實(shí)現(xiàn)trigger方法

    摘要：綁定事件時(shí)使用對(duì)象的方法，而實(shí)現(xiàn)則是使用對(duì)像的方法。需要以參數(shù)形式傳入被派發(fā)的事件對(duì)象，該事件對(duì)象可以通過(guò)的全局構(gòu)造函數(shù)。而以上的方法僅限于直接綁定至的事件，預(yù)綁定的事件無(wú)法通過(guò)來(lái)執(zhí)行且需要其它方法協(xié)同處理。 事件綁定成功之后，事件的執(zhí)行函數(shù)就如同待字閨中的小姑娘。除了由坐在電腦前的大叔們用鍵盤(pán)、鼠標(biāo)等硬件行為觸發(fā)外，需要在代碼中直接調(diào)用又該如何實(shí)現(xiàn)？ 首先需要將事件綁定至指定DOM節(jié)...

    fox_soyoung 評(píng)論0 收藏0

  • jQuery源碼解析之trigger()

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

    Youngs 評(píng)論0 收藏0

  • jQuery 源碼系列（十四）自定義事件

    摘要：不過(guò)也有自己的一套自定義事件方案?？梢院褪录脕?lái)對(duì)比，他們都是用來(lái)模擬和執(zhí)行監(jiān)聽(tīng)的事件。冒泡事件就是就是由內(nèi)向外冒泡的過(guò)程，這個(gè)過(guò)程不是很復(fù)雜。參考解密事件核心自定義設(shè)計(jì)三解密事件核心模擬事件四本文在上的源碼地址，歡迎來(lái)。 歡迎來(lái)我的專欄查看系列文章。 以前，我只知道，只有當(dāng)對(duì)瀏覽器中的元素進(jìn)行點(diǎn)擊的時(shí)候，才會(huì)出發(fā) click 事件，其它的事件也一樣，需要人為的鼠標(biāo)操作。 showIm...

    elliott_hu 評(píng)論0 收藏0

  • jQuery 事件(三) 事件的綁定和解綁、對(duì)象的使用、自定義事件

    摘要：事件的綁定和解綁的多事件綁定之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤(pán)事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類(lèi)事件都是屬于快捷處理。由于瀏覽器事件冒泡特性，可以在觸發(fā)時(shí)把這個(gè)事件往上冒泡到上，因?yàn)樯辖壎ㄊ录憫?yīng)，所以能觸發(fā)這個(gè)動(dòng)作。 事件的綁定和解綁 on()的多事件綁定 之前學(xué)的鼠標(biāo)事件，表單事件與鍵盤(pán)事件都有個(gè)特點(diǎn)，就是直接給元素綁定一個(gè)處理函數(shù)，所有這類(lèi)事件都是屬于快捷處理...

    niuxiaowei111 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<