JS CustomEvent自定義事件傳參

首先，看了鑫大佬的文章后，百度了文章內容的兩個方法：

1、CustomEvent事件是有程序創建的，可以有任意自定義功能的事件

2、dispatchEvent()方法給節點分派一個合成事件

這兩個方法之前也見過，不過並沒有去了解，這次剛好又看到，就簡單了解一下。好了，直接進入正文

一、addEventListener事件觸發

例子，假設DOM對象變量名稱是input，給輸入框元素綁定了一個'input'事件：

input.addEventListener('input', function () {
    // content
});

此時，點擊下拉框希望觸發輸入框元素的"input"事件，就可以使用dispatchEvent方法和CustomEvent對象

input.dispatchEvent(new CustomEvent('input'));

如果希望觸發"input"事件的同事傳遞下拉列表對應的參數對象給"input"事件，則可以使用CustomEvent.detail

var myEvent = new CustomEvent('input', {
    // objParams就是需要傳遞的參數，
    // 可以是任意的類型
    detail: objParams
});
input.dispatchEvent(myEvent);

二、支持任意的自定義事件名稱

不僅是瀏覽器原生的事件，如"click"，"mousedown"，"change"，"mouseover"，"mouseenter"等可以觸發，任意的自定義名稱的事件也是可以觸發的

document.body.addEventListener('拜會鑫大佬', () => { console.log('文明、公正、法治、誠信'); });
// 觸發
document.body.dispatchEvent(new CustomEvent('拜會鑫大佬'));

結果如下：

 

傳參也是一樣：

document.body.addEventListener('show', (event) => { console.log(event.detail); });
// 觸發
let myEvent = new CustomEvent('show', {
    detail: {
        username: 'zhangxinxu.com',
        userid: '20200820'
    }
});
document.body.dispatchEvent(myEvent);

結果如下：

 

 三、IE瀏覽器不支持怎么處理

IE瀏覽器是不支持CustomEvent.detail的，Edge 14+才開始支持，所以需要增加一段Polyfill腳本就可以了，如下：

/**
 * CustomEvent constructor polyfill for IE
 */
(function () {
    if (typeof window.CustomEvent === 'function') {
        // 如果不是IE
        return false;
    }

    var CustomEvent = function (event, params) {
        params = params || {
            bubbles: false,
            cancelable: false,
            detail: undefined
        };
        var evt = document.createEvent('CustomEvent');
        evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
        return evt;
    };

    CustomEvent.prototype = window.Event.prototype;

    window.CustomEvent = CustomEvent;
})();

這段代碼復制到頁面中，放在具體的業務JavaScript代碼的前面，否則可能會因為執行時機先后的問題導致出bug。

 

 

 

 

 

 

 

 

 

 

本文內容來自鑫大佬的官網：https://www.zhangxinxu.com/wordpress/2020/08/js-customevent-pass-param/