小知了
一个不神奇的博客
一个简单的自定义事件处理器
2017-01-03 01:01:44   阅读523次

我们先来看一下正常的事件绑定形式:

doucment.getElementById("btn").addEventLisnter("click",function(event){
    // your processing
})


我们可以看出正常事件绑定需要四个组成部分:

1 获取的元素(Element的子类)  

2 事件绑定函数  (addEventLisnter)   

3 事件类型   (click)

4 事件触发的回调函数  (function(event){})


其原理是:所有的Element元素实现了EventTarget接口,在该接口中定义了三个方法,


EventTarget.addEventListener()
EventTarget.removeEventListener()
EventTarget.dispatchEvent()

所有实现了EventTarget的元素类型,均可以调用以上三个方法。在浏览器查看Element对象原型链继承时候也可以看到三个方法:

console.log(Element.prototype)

clipboard.png

所以实现一个自定义事件也要考虑以上原理:

// 构造函数+原型模式创建对象
function MyEventTarget(){
    /*handlers = {
         "message":[func1,func2,func3],
         "info":[func4,func5,func6]
         ......
    }*/
    this.handlers = {};
}


// 相应类型的事件添加上不同的处理方法
MyEventTarget.prototype.addEvent= function(type, handler){
    if(typeof this.handlers[type] === 'undefined'){
        this.handlers[type] = [];
    }
    this.handlers[type].push(handler);
}


// 移出相应类型事件所对应的方法
MyEventTarget.prototype.removeEvent= function(type, handler){
    if(this.handlers[type] instanceof Array){
        var handers = this.handlers[type];
        for(var i=0, len=handers.length; i< len;i++) {
            if(handers[i] === handler){
                break;
            }
        }
        handers.splice(i,1);
    }
}


MyEventTarget.prototype.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++){
            // 调用每一个事件处理函数
            handlers[i](event);
        }
    }
}


// 自定义时间处理函数
function handler1(event){
    alert("handler1"+ event.say);
}


// 创建目标对象
var target = new MyEventTarget();
 
// 给目标对象添加事件以及事件处理函数
target.addEvent("message",handler1);
 
// 把事件和事件处理函数相关联起来  事件     
target.fire({type:"message",say:"asdd"});


我们现在给自定义事件对象添加子类:(好比给Element实现一个HTMLElement,而HTEMLElement上也具备Element上的事件方法)

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}


function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);   
    prototype.constructor = subType;              
    subType.prototype = prototype;               
}


function Person(name, age){
    EventTarget.call(this);   //借用构造函数
    this.name = name;
    this.age = age;
}
inheritPrototype(Person,MyEventTarget);
 
// 触发事件方法
Person.prototype.say = function(message){
    this.fire({type: "message", message: message});
};
 
// 自定义事件
function handleMessage(event){
    alert(event.target.name + " says: " + event.message);
}
 
var person = new Person("Nicholas", 29);
//监听
person.addEvent("message", handleMessage);
//触发
person.say("Hi there.");


参考《Js高级程序设计》P616

参考:http://devdocs.io/dom/eventtarget(有一种新的实现方式)

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget




-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
暂无评论
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航