溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

如何使用dispatchEvent自定義事件觸發(fā)

發(fā)布時間：2021-07-12 09:27:29 來源：億速云 閱讀：209 作者：Leah 欄目：大數(shù)據(jù)

如何使用dispatchEvent自定義事件觸發(fā)，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

window.addEventListener && window.dispatchEvent

一、標(biāo)準(zhǔn)瀏覽器提供了可供元素觸發(fā)的方法：element.dispatchEvent()，在使用之前，需要創(chuàng)建和初始化，下面是具體的用法：

vue中舉例：

1.通過 var event = document.createEvent("HTMLEvents"); 這個方法創(chuàng)建一個event對象實(shí)例
2.通過 event.initEvent("aaa", true, true); 初始化一個aaa事件，// 3個參數(shù)：事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為

注意：/*屬性，可以隨便自己定義*/


event.name = 'hello, 我是小禮';
event.message = '我今年18歲';
  
3.然后通過 window.dispatchEvent(event); 方法觸發(fā)自定義事件aaathis.$nextTick(tick => {     var event = document.createEvent("HTMLEvents");     event.initEvent("aaa", true, true);     window.dispatchEvent(event);})

4.最后在需要監(jiān)聽這個事件的頁面，通過window.addEventListener('aaa', function(){});即可監(jiān)聽到事件的執(zhí)行

window.addEventListener('aaa', function (event) {    console.log(event.name+'，'+event.message);}, false);

//控制臺就可以打印出監(jiān)聽的結(jié)果：hello, 我是小禮，我今年18歲

dispatchEvent大概就是這三步

下面再看看一段代碼，非IE主流瀏覽器及IE下的事件觸發(fā)器

var fireEvent = function(element,event){      if (document.createEventObject) {          // IE瀏覽器支持fireEvent方法          var evt = document.createEventObject();          return element.fireEvent('on'+event,evt)      } else {          // 其他標(biāo)準(zhǔn)瀏覽器使用dispatchEvent方法          var evt = document.createEvent( 'HTMLEvents' );          evt.initEvent(event, true, true);          return !element.dispatchEvent(evt);      }};

document.creatEventObject()是IE創(chuàng)建event對象實(shí)例的方法，和document.creatEvent('HTMLEvents')在非IE主流瀏覽器下的作用相同，fireEvent是IE下的事件觸發(fā)器，與dispatchEvent在非IE主流瀏覽器下作用相同。

看完上述內(nèi)容，你們掌握如何使用dispatchEvent自定義事件觸發(fā)的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手