Javascript自定义事件

Leck1e 发布于2019-08-21 10:40 / 732人阅读

摘要：事件定义事件是与交互的最常见的方式但它也可以用于非代码中通过实现自定义事件实现自定义事件的原理是创建一个管理事件的对象如下代码是事件的定义存储事件处理程序由个键值对组成键表示事件名值是一个由事件处理程序组成的数组添加事件触发事件将传递给

事件定义

事件是与DOM交互的最常见的方式,但它也可以用于非DOM代码中--通过实现自定义事件.实现自定义事件的原理是创建一个管理事件的对象.如下代码是事件的定义:

function EventTarget(){
this.handlers = {};//存储事件处理程序,由n个键值对组成,键表示事件名,值是一个由事件处理程序组成的数组
}

EventTarget.prototype = {

constructor:EventTarget,

//添加事件
addHandler:function(type,handler){

    if(typeof this.handlers[type] == "undefined"){
        this.handlers[type] = [];
    }
    this.handlers[type].push(handler);
    
},

//触发事件
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代表事件名,你可以根据情况为添加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);
    }
}

};

首先是定义了一个名为EventTarget的构造函数,为其定义的属性handlers用于存储事件处理程序,
然后有三个操作方法添加到EventTarget的原型中,分别是addHandler fire remocveHander.

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

fire是触发handlers中的事件处理程序

removeHandler是向handlers中移除事件处理程序
注:事件处理程序通俗的讲就是事件被触发时需要执行的方法.

事件调用

var eventObj=new EventTarget(); //实例化一个EventTarget类型

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

eventObj.addHandler("alert",handler); //为eventObj对象添加一个事件处理程序`handler`

event.fire({type:"alert"});  //触发eventObj对象中的事件处理程序`handler`

event.removeHandler("alert",handler);  //删除eventObj对象中的事件处理程序`handler`

事件继承

当然我们也可以通过继承让其他引用类型继承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}); //触发事件
};

//事件处理程序
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");

使用自定义事件有助于解耦相关对象,保持功能的隔绝,在很多情况下,触发事件的代码和监听事件的代码是完全分离的.

GPU云服务器云服务器自定义事件 js 自定义触发事件自定义头像自定义

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85990.html

javascript自定义事件浅析

摘要：首先来看看什么是自定义事件让函数能够具备事件的某些特性。其实自定义事件在一些主流的类库中都有实现，后续会分析具体的实现方法。今天，我们就先用简单的例子来实现自定义事件的功能。在团队协作的很多情况下，某个js的函数会根据不断增加的需求进而不断增加功能，如果功能需求累积过多，我们就很难把控自己在这个函数中新定义的变量会不会覆盖掉之前的定义。如： function action(){ ...

miya 2019-08-21 10:46 评论0 收藏0
javascript自定义事件原理

摘要：我们就需要我们自己去定义事件其实就是我们写的函数，尤其是组件开发过程中，用的尤为多。可能有确定按钮取消按钮等操作。但是自定义事件的基本原理就是如上描绘的那样我们都知道，鼠标点击click，触屏的touch等事件，可以触发相应的事件处理程序，也可以为这些事件添加事件处理程序，实际开发过程中可供我们使用的事件很少，click、doubleclick，mouseover、mousemove...

JowayYoung 2019-08-20 15:17 评论0 收藏0
JavaScript疑难杂症系列-事件

摘要：支持三个参数分别表示事件名称，是否可以冒泡，是否阻止事件的默认操作触发参数表示事件对象，是方法返回的创建的对象监听方法自定义事件常用模拟模拟方法操作或者自定义事件我的自定义事件。事件这块知识点虽然是老生长谈的,但对于我来说多多整理,多多感悟,温故知新,每次看看这块都有不同的收获.(在这里我不会长篇大论,只会挑重点;具体的小伙伴们自行查找) 什么是事件在编程时系统内发生的动作或者发生...

CocoaChina 2019-08-30 13:57 评论0 收藏0
JavaScript疑难杂症系列-事件

摘要：支持三个参数分别表示事件名称，是否可以冒泡，是否阻止事件的默认操作触发参数表示事件对象，是方法返回的创建的对象监听方法自定义事件常用模拟模拟方法操作或者自定义事件我的自定义事件。事件这块知识点虽然是老生长谈的,但对于我来说多多整理,多多感悟,温故知新,每次看看这块都有不同的收获.(在这里我不会长篇大论,只会挑重点;具体的小伙伴们自行查找) 什么是事件在编程时系统内发生的动作或者发生...

Anleb 2019-08-26 11:42 评论0 收藏0