Javascript 自定义事件

原创 2016年08月29日 10:07:13

事件定义

事件是与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');

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

javascript之自定义事件

JavaScript05—自定义对象、事件、计算器

自定义对象,事件处理机制,冒泡计算器和事件计算器

Javascript之自定义事件

鉴于之前看的一些javascript资料和自己之前写的AS代码,javascript的事件定义的还是比较充分的,足够满足日常的需求。 但目前发现唯一不足的就是,js的自定义事件,目前还不被大部分浏览...

JavaScript 自定义事件

事件是一个观察者模式,即由主体(DOM元素)和观察者(事件处理代码)组成,主体可以脱离观察者单独存在,观察者知道主体并能注册事件的回调函数。 下面是自定义事件的基本模式:function Event...

javascript自定义事件应用实例

js自定义事件 实现观察者模式,模块之间完全通过事件协作和传递信息。写了一个典型的观察者应用和一个游戏的框架代码,来演示自定义事件的使用

如何在JavaScript中创建自定义事件

avaScript事件处理所有客户端应用程序的基础。当一个事件发生在目标元素,如按钮单击,鼠标移动,表单提交等,一个处理程序函数执行。一个事件对象传递给处理程序提供各种属性和大量的方法来防止违规行为。...

Java、LotusScript和JavaScript中的自定义事件编程

面向对象的LotusScript(六)之为自定义对象模拟事件和面向对象设计与事件两篇文章都提到事件是编程时对很多场景的抽象和解决模式,核心就是在两个对象之间建立一种“提醒”机制,当某件事发生时,作为发...

JavaScript自定义事件

JavaScript自定义事件

JavaScript自定义跨浏览器事件处理工具

JavaScript自定义跨浏览器事件处理工具 自定义一个跨浏览器事件处理工具(将JS代码存到自己的一个JS文件中)。用一个JS对象来封装函数。这期博文中只写了关于添加和删除事件的成员函数。 ...

12JavaScript自定义对象、事件

自定义对象自定义对象概述 是一种特殊的数据类型,由属性和方法封装而成 属性是指与对象有关的值:对象名.属性名 方法是指对象可以执行的行为或可以完成的功能:对象名.方法名() 创建对象直接创建对象 使用...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)