Javascript自定義事件

2021-09-19 11:35:56 字數 1631 閱讀 6686

事件是與dom互動的最常見的方式,但它也可以用於非dom**中--通過實現自定義事件.實現自定義事件的原理是建立乙個管理事件的物件.如下**是事件的定義:

function eventtarget();//儲存事件處理程式,由n個鍵值對組成,鍵表示事件名,值是乙個由事件處理程式組成的陣列

}eventtarget.prototype =

this.handlers[type].push(handler);

},//觸發事件

fire:function(event)

if(this.handlers[event.type] instanceof array)

}},//移除事件

removehandler:function(type,handler)

}handlers.splice(i,1);

}}};

首先是定義了乙個名為eventtarget的建構函式,為其定義的屬性handlers用於儲存事件處理程式,

然後有三個操作方法新增到eventtarget的原型中,分別是addhandlerfireremocvehander.

var eventobj=new eventtarget(); //例項化乙個eventtarget型別

var handler=function(); //事件處理程式

eventobj.addhandler('alert',handler); //為eventobj物件新增乙個事件處理程式`handler`

event.fire(); //觸發eventobj物件中的事件處理程式`handler`

event.removehandler('alert',handler); //刪除eventobj物件中的事件處理程式`handler`

當然我們也可以通過繼承讓其他引用型別繼承eventtarget的屬性和方法.

//原型式繼承

var object=function(o)

f.prototype=o;

return new f();

};//subtype繼承supertype的原型物件

var inheritprototype=function(subtype,supertype)

function person(name,age)

inheritprototype(person,eventtarget);//繼承eventtarget的方法

person.prototype.say=function(message)); //觸發事件

};//事件處理程式

var handmessage=function(event);

var person=new person('yhlf',29);

person.addhandler('message',handmessage);

person.say('hi there');

使用自定義事件有助於解耦相關物件,保持功能的隔絕,在很多情況下,觸發事件的**和監聽事件的**是完全分離的.

JavaScript自定義事件

最近遇到乙個基於jquery專案,專案中的功能節點頁面都是通過iframe實現,但是各個iframe之間有時需要相互通訊,互相相應一些事件,為了更愉快的編碼所以想到了自定義事件,還別說用起來竟然有點像vue的元件通訊 top.events if this.handles name else this...

JavaScript自定義事件

最近遇到乙個基於jquery專案,專案中的功能節點頁面都是通過iframe實現,但是各個iframe之間有時需要相互通訊,互相相應一些事件,為了更愉快的編碼所以想到了自定義事件,還別說用起來竟然有點像vue的元件通訊 top.events if this.handles name else this...

javascript事件基礎 自定義事件(封裝)

設計彈框和遮罩層 設計彈出對話方塊 對話寬標題 對話方塊內容 定義時間雛形 那麼怎麼關閉遮罩層?重寫對話方塊型別物件 function dialog id 重寫開啟對話方塊的方法 function opendialog 在opendialog方法中,建立dialog物件後為控制代碼賦值,傳遞乙個隱藏...