DOM3中的自定义事件

图片发自简书App

//自定义事件
var $ = function(el){
return new _$(el);
}
var _$ = function(el){
this.el = (el&&el.nodeType == 1)?el: document;
}
_$.prototype = {
constructor: _$,
addEvent: function(type, fn,capture) {
var el = this.el;
if(window.addEventListener){
el.addEventListener(type, fn, capture);
var ev = document.createEvent("HTMLEvents");
ev.initEvent(type, capture||false, false);
//在元素上存储创建的事件,方便自定义事件的触发
if(!el["ev"+type]){
el["ev"+type] = ev;
}
}else if (window.attachEvent) {
el.attachEvent("on"+type, fn);
if(isNaN(el["cu" + type])){
//自定义属性,触发事件
el["cu" + type] = 0;
}
var fnEv = function(event){
if(event.prototyName == "cu"+type){
fn.call(el);
}
}
el.attachEvent("onpropertychange", fnEv);
//在元素上存储绑定的propertychange事件,方便删除
if(!el["el" + type]){
el["ev"+type] = [fnEv];
}else{
el["ev" + type].push(fnEv);
}
}
return this;
},

fireEvent: function(type){
var el = this.el;
if(typeof type === "string"){
if(document.dispatchEvent){
if(el["ev" + type]){
el.dispatchEvent(el["ev" + type]);
}
}else if (document.attachEvent) {
//改变自定义属性,触发自定义事件
el["cu" + type]++;
}
}
return this;
},

removeEvent: function(type ,fn ,capture){
var el = this.el;
if(window.removeEventListener){
el.removeEventListener(type , fn, capture||false);
}else if (document.detachEvent) {
el.detachEvent( "on" + type,fn);
var arrEv = el["ev" + type];
if(arrEv instanceof Array){
for (var i = 0; i < arrEv.length; i+=1) {
//删除方法名下所有绑定的propertychange事件
el.detachEvent("onpropertychange" , arrEv[i]);
}
}
}
return this;
}
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. tab列表折叠效果 html: 能源系统事业部 岗位名称: 工作地点 岗位名...
    lilyping阅读 1,928评论 0 1
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,120评论 1 10
  • 为什么人会有不开心呢,是因为自己太蠢,太笨,还是自己的心太小,想的太多。
    别人眼中所谓的那个人阅读 152评论 0 0
  • 概念 flex container(flex容器) 任何一个HTML元素都可以指定成flex布局(display:...
    梁同学de自言自语阅读 897评论 0 0
  • “放着长远的眼光,用利他主义的方式来做利己的事情”这段话还是得探讨,道理是没问题,而要落地,则还需从自身入手才行。...
    水是一种状态阅读 363评论 0 0