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

成都創(chuàng)新互聯(lián)主營(yíng)鶴壁網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都app軟件開(kāi)發(fā)公司,鶴壁h5小程序定制開(kāi)發(fā)搭建,鶴壁網(wǎng)站營(yíng)銷推廣歡迎鶴壁等地區(qū)企業(yè)咨詢

window.addEventListener && window.dispatchEvent

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

vue中舉例：

1.通過(guò) var event = document.createEvent("HTMLEvents"); 這個(gè)方法創(chuàng)建一個(gè)event對(duì)象實(shí)例

2.通過(guò) event.initEvent("aaa", true, true); 初始化一個(gè)aaa事件，// 3個(gè)參數(shù)：事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為

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

event.name = 'hello, 我是小禮';
event.message = '我今年18歲';

3.然后通過(guò) window.dispatchEvent(event); 方法觸發(fā)自定義事件aaathis.$nextTick(tick => {     var event = document.createEvent("HTMLEvents");     event.initEvent("aaa", true, true);     window.dispatchEvent(event);})

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

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

//控制臺(tái)就可以打印出監(jiān)聽(tīng)的結(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對(duì)象實(shí)例的方法，和document.creatEvent('HTMLEvents')在非IE主流瀏覽器下的作用相同，fireEvent是IE下的事件觸發(fā)器，與dispatchEvent在非IE主流瀏覽器下作用相同。

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