Javascript自定義事件

Leck1e 發(fā)布于2019-08-21 10:40 / 773人閱讀

摘要：事件定義事件是與交互的最常見(jiàn)的方式但它也可以用于非代碼中通過(guò)實(shí)現(xiàn)自定義事件實(shí)現(xiàn)自定義事件的原理是創(chuàng)建一個(gè)管理事件的對(duì)象如下代碼是事件的定義存儲(chǔ)事件處理程序由個(gè)鍵值對(duì)組成鍵表示事件名值是一個(gè)由事件處理程序組成的數(shù)組添加事件觸發(fā)事件將傳遞給

事件定義

事件是與DOM交互的最常見(jiàn)的方式,但它也可以用于非DOM代碼中--通過(guò)實(shí)現(xiàn)自定義事件.實(shí)現(xiàn)自定義事件的原理是創(chuàng)建一個(gè)管理事件的對(duì)象.如下代碼是事件的定義:

function EventTarget(){
this.handlers = {};//存儲(chǔ)事件處理程序,由n個(gè)鍵值對(duì)組成,鍵表示事件名,值是一個(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代表對(duì)象本身,
                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用于存儲(chǔ)事件處理程序,
然后有三個(gè)操作方法添加到EventTarget的原型中,分別是addHandler fire remocveHander.

addHander是向handlers中添加事件處理程序

fire是觸發(fā)handlers中的事件處理程序

removeHandler是向handlers中移除事件處理程序
注:事件處理程序通俗的講就是事件被觸發(fā)時(shí)需要執(zhí)行的方法.

事件調(diào)用

var eventObj=new EventTarget(); //實(shí)例化一個(gè)EventTarget類(lèi)型

var handler=function(){
    alert("event");
};  //事件處理程序

eventObj.addHandler("alert",handler); //為eventObj對(duì)象添加一個(gè)事件處理程序`handler`

event.fire({type:"alert"});  //觸發(fā)eventObj對(duì)象中的事件處理程序`handler`

event.removeHandler("alert",handler);  //刪除eventObj對(duì)象中的事件處理程序`handler`

事件繼承

當(dāng)然我們也可以通過(guò)繼承讓其他引用類(lèi)型繼承EventTarget的屬性和方法.

//原型式繼承
var object=function(o){
    function F(){}
    F.prototype=o;
    return new F();
};


//subType繼承superType的原型對(duì)象
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)對(duì)象,保持功能的隔絕,在很多情況下,觸發(fā)事件的代碼和監(jiān)聽(tīng)事件的代碼是完全分離的.

云服務(wù)器 GPU云服務(wù)器自定義事件 js 自定義觸發(fā)事件自定義頭像自定義

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85990.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Leck1e

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

word2vec

閱讀 1552·2023-04-26 02:08
身價(jià)過(guò)億的女王對(duì)小碼農(nóng)說(shuō)中斷會(huì)了嗎

閱讀 3140·2021-10-14 09:42
域名中的主機(jī)名是什么-網(wǎng)址的主機(jī)名是什么？

閱讀 7240·2021-09-22 15:34
CSS-在`有限寬度的`父級(jí)內(nèi)部時(shí)，創(chuàng)建一個(gè)`全瀏覽器寬度`的容器

閱讀 3253·2019-08-30 13:16
(00)00-7F字符編碼對(duì)照表

閱讀 2768·2019-08-26 13:49
這兒有一個(gè)使你網(wǎng)頁(yè)性能提升10倍的工具

閱讀 1357·2019-08-26 11:59
用JavaScript來(lái)計(jì)算兩個(gè)圖像的相似度

閱讀 1290·2019-08-26 10:31
一文讀懂JSONP原理

閱讀 2179·2019-08-23 17:19

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Javascript自定義事件

相關(guān)文章