js自定义事件

2021-03-06 12:26

阅读:699

标签:new   log   fun   冒泡   console   font   fine   win   cancel   

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;
    }
})();

 

js自定义事件

标签:new   log   fun   冒泡   console   font   fine   win   cancel   

原文地址:https://www.cnblogs.com/mengff/p/12897705.html


评论


亲,登录后才可以留言!