码迷,mamicode.com
首页 > Web开发 > 详细

js自定义事件

时间:2020-05-15 22:57:03      阅读:101      评论:0      收藏:0      [点我收藏+]

标签: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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!