DOM3中的自定義事件

圖片發(fā)自簡書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);
//在元素上存儲創(chuàng)建的事件,方便自定義事件的觸發(fā)
if(!el["ev"+type]){
el["ev"+type] = ev;
}
}else if (window.attachEvent) {
el.attachEvent("on"+type, fn);
if(isNaN(el["cu" + type])){
//自定義屬性,觸發(fā)事件
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) {
//改變自定義屬性,觸發(fā)自定義事件
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;
}
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容