資訊專欄INFORMATION COLUMN
摘要：事件定義事件是與交互的最常見的方式但它也可以用于非代碼中通過實(shí)現(xiàn)自定義事件實(shí)現(xiàn)自定義事件的原理是創(chuàng)建一個(gè)管理事件的對象如下代碼是事件的定義存儲事件處理程序由個(gè)鍵值對組成鍵表示事件名值是一個(gè)由事件處理程序組成的數(shù)組添加事件觸發(fā)事件將傳遞給
事件定義
事件是與DOM交互的最常見的方式,但它也可以用于非DOM代碼中--通過實(shí)現(xiàn)自定義事件.實(shí)現(xiàn)自定義事件的原理是創(chuàng)建一個(gè)管理事件的對象.如下代碼是事件的定義:
function EventTarget(){
this.handlers = {};//存儲事件處理程序,由n個(gè)鍵值對組成,鍵表示事件名,值是一個(gè)由事件處理程序組成的數(shù)組
}
EventTarget.prototype = {
constructor:EventTarget,
//添加事件
addHandler:function(type,handler){
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
//觸發(fā)事件
fire:function(event){
if(!event.target){
event.target = this;
}
if(this.handlers[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i=0,len=handlers.length;i < len;i++){
//將event傳遞給事件處理程序,event.target代表對象本身,
event.type代表事件名,你可以根據(jù)情況為添加event屬性
handlers[i](event);
}
}
},
//移除事件
removeHandler:function(type,handler){
if(this.handlers[type] instanceof Array){
var handlers=this.handlers[type];
for(var i=0,len=handlers.length;i < len; i++){
if(handlers[i] == handler){
break;
}
}
handlers.splice(i,1);
}
}
};
首先是定義了一個(gè)名為EventTarget的構(gòu)造函數(shù),為其定義的屬性handlers用于存儲事件處理程序,
然后有三個(gè)操作方法添加到EventTarget的原型中,分別是addHandler fire remocveHander.
addHander是向handlers中添加事件處理程序
fire是觸發(fā)handlers中的事件處理程序
removeHandler是向handlers中移除事件處理程序
注:事件處理程序通俗的講就是事件被觸發(fā)時(shí)需要執(zhí)行的方法.
var eventObj=new EventTarget(); //實(shí)例化一個(gè)EventTarget類型
var handler=function(){
alert("event");
}; //事件處理程序
eventObj.addHandler("alert",handler); //為eventObj對象添加一個(gè)事件處理程序`handler`
event.fire({type:"alert"}); //觸發(fā)eventObj對象中的事件處理程序`handler`
event.removeHandler("alert",handler); //刪除eventObj對象中的事件處理程序`handler`
事件繼承
當(dāng)然我們也可以通過繼承讓其他引用類型繼承EventTarget的屬性和方法.
//原型式繼承
var object=function(o){
function F(){}
F.prototype=o;
return new F();
};
//subType繼承superType的原型對象
var inheritPrototype=function(subType,superType){
var prototype=object(superType.prototype);
prototype.constructor=subType;
subType.prototype=prototype;
}
function Person(name,age){
EventTarget.call(this);//繼承EventTarget的屬性
this.name = name;
this.age = age;
}
inheritPrototype(Person,EventTarget);//繼承EventTarget的方法
Person.prototype.say=function(message){
this.fire({type:"message",message:message}); //觸發(fā)事件
};
//事件處理程序
var handMessage=function(event){
alert(event.target.name + "says:" + event.message);
};
var person=new Person("yhlf",29);
person.addHandler("message",handMessage);
person.say("Hi there");
使用自定義事件有助于解耦相關(guān)對象,保持功能的隔絕,在很多情況下,觸發(fā)事件的代碼和監(jiān)聽事件的代碼是完全分離的.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/85990.html
摘要：首先來看看什么是自定義事件讓函數(shù)能夠具備事件的某些特性。其實(shí)自定義事件在一些主流的類庫中都有實(shí)現(xiàn)，后續(xù)會分析具體的實(shí)現(xiàn)方法。今天，我們就先用簡單的例子來實(shí)現(xiàn)自定義事件的功能。 在團(tuán)隊(duì)協(xié)作的很多情況下，某個(gè)js的函數(shù)會根據(jù)不斷增加的需求進(jìn)而不斷增加功能，如果功能需求累積過多，我們就很難把控自己在這個(gè)函數(shù)中新定義的變量會不會覆蓋掉之前的定義。如： function action(){ ...
摘要：我們就需要我們自己去定義事件其實(shí)就是我們寫的函數(shù)，尤其是組件開發(fā)過程中，用的尤為多?？赡苡写_定按鈕取消按鈕等操作。但是自定義事件的基本原理就是如上描繪的那樣 我們都知道，鼠標(biāo)點(diǎn)擊click，觸屏的touch等事件，可以觸發(fā)相應(yīng)的事件處理程序，也可以為這些事件添加事件處理程序，實(shí)際開發(fā)過程中可供我們使用的事件很少，click、doubleclick，mouseover、mousemove...
摘要：支持三個(gè)參數(shù)分別表示事件名稱，是否可以冒泡，是否阻止事件的默認(rèn)操作觸發(fā)參數(shù)表示事件對象，是方法返回的創(chuàng)建的對象監(jiān)聽方法自定義事件常用模擬模擬方法操作或者自定義事件我的自定義事件。 事件這塊知識點(diǎn)雖然是老生長談的,但對于我來說多多整理,多多感悟,溫故知新,每次看看這塊都有不同的收獲.(在這里我不會長篇大論,只會挑重點(diǎn);具體的小伙伴們自行查找) 什么是事件 在編程時(shí)系統(tǒng)內(nèi)發(fā)生的動作或者發(fā)生...
摘要：支持三個(gè)參數(shù)分別表示事件名稱，是否可以冒泡，是否阻止事件的默認(rèn)操作觸發(fā)參數(shù)表示事件對象，是方法返回的創(chuàng)建的對象監(jiān)聽方法自定義事件常用模擬模擬方法操作或者自定義事件我的自定義事件。 事件這塊知識點(diǎn)雖然是老生長談的,但對于我來說多多整理,多多感悟,溫故知新,每次看看這塊都有不同的收獲.(在這里我不會長篇大論,只會挑重點(diǎn);具體的小伙伴們自行查找) 什么是事件 在編程時(shí)系統(tǒng)內(nèi)發(fā)生的動作或者發(fā)生...
閱讀 1628·2023-04-26 02:08
閱讀 3195·2021-10-14 09:42
閱讀 7346·2021-09-22 15:34
閱讀 3306·2019-08-30 13:16
閱讀 2838·2019-08-26 13:49
閱讀 1407·2019-08-26 11:59
閱讀 1343·2019-08-26 10:31
閱讀 2237·2019-08-23 17:19
