溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
如何使用dispatchEvent自定義事件觸發，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
一、標準瀏覽器提供了可供元素觸發的方法：element.dispatchEvent()，在使用之前，需要創建和初始化，下面是具體的用法：
vue中舉例：
1.通過 var event = document.createEvent("HTMLEvents"); 這個方法創建一個event對象實例
2.通過 event.initEvent("aaa", true, true); 初始化一個aaa事件，// 3個參數：事件類型，是否冒泡，是否阻止瀏覽器的默認行為
注意：/*屬性，可以隨便自己定義*/
event.name = 'hello, 我是小禮';event.message = '我今年18歲';
3.然后通過 window.dispatchEvent(event); 方法觸發自定義事件aaathis.$nextTick(tick => { var event = document.createEvent("HTMLEvents"); event.initEvent("aaa", true, true); window.dispatchEvent(event);})
4.最后在需要監聽這個事件的頁面，通過window.addEventListener('aaa', function(){});即可監聽到事件的執行
window.addEventListener('aaa', function (event) { console.log(event.name+'，'+event.message);}, false);
//控制臺就可以打印出監聽的結果：hello, 我是小禮，我今年18歲dispatchEvent大概就是這三步
下面再看看一段代碼，非IE主流瀏覽器及IE下的事件觸發器
var fireEvent = function(element,event){ if (document.createEventObject) { // IE瀏覽器支持fireEvent方法 var evt = document.createEventObject(); return element.fireEvent('on'+event,evt) } else { // 其他標準瀏覽器使用dispatchEvent方法 var evt = document.createEvent( 'HTMLEvents' ); evt.initEvent(event, true, true); return !element.dispatchEvent(evt); }};
document.creatEventObject()是IE創建event對象實例的方法，和document.creatEvent('HTMLEvents')在非IE主流瀏覽器下的作用相同，fireEvent是IE下的事件觸發器，與dispatchEvent在非IE主流瀏覽器下作用相同。
看完上述內容，你們掌握如何使用dispatchEvent自定義事件觸發的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
