js自定义事件

Posted 2020-12-20 等风来

CustomEvent

event = new CustomEvent(typeArg, {
    detail: ‘‘           //数据
    bubbles: true,       //是否支持冒泡
    cancelable: true     //是否支持取消事件
});

1. 用法

//定义事件
var event = new CustomEvent(‘student‘,{
    detail: {
        hasSchool: ture
    }
})

//监听事件
domElement.addEvent(‘student‘, function(e){
    console.log(e.detail);
})

//触发事件，同一个监听的dom元素，dispatch一个event对象
domElement.dispatchEvent(event);

或者直接在window对象上触发

// 随后在对应的元素上触发该事件
if(window.dispatchEvent) {  
    window.dispatchEvent(myEvent);
} else {
    //兼容IE
    window.fireEvent(myEvent);
}

2. 兼容性

IE不支持CustomEvent，所幸IE已经快灭绝了

可以使用IE自身的document.createEvent来模拟一个CustomEvent，可达到一样的效果。

(function(){
    try{
        // a : While a window.CustomEvent object exists, it cannot be called as a constructor.
        // b : There is no window.CustomEvent object
        new window.CustomEvent(‘T‘);
    }catch(e){
        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;
    }
})();