js handleEvent接口学习

68 阅读 0 评论 45 点赞

我是靠谱客的博主伶俐黑猫，最近开发中收集的这篇文章主要介绍js handleEvent接口学习，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

http://www.tzwhx.com/NewShow/newBodyShow/%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86_47327.html

http://www.veryhuo.com/a/view/50318.html

先来看个例子

var o = {
    handleEvent : function () {
        alert('handleEvent executed');
    }
};
element.addEventListener('click', o, false);

这个属性是DOM2的标准中的

// Introduced in DOM Level 2:

interface EventListener {

void handleEvent(in Event evt);

};

handleEvent

This method is called whenever an event occurs of the type for which the EventListener interface was registered.

Parameters

evt of type Event

The Event contains contextual information about the event. It also contains the stopPropagation and preventDefault methods which are used in determining the event's flow and default action.

1.可以把所有事件都写到一个obj当中，原生的非原生的都可以作为handleEvent里的一条处理逻辑

2.事件无需remove就可以动态改变；之前的事件派发中心模式，事件中心也可以变的更简单。

当定义对象封装的时候，可以直接将 this 指针传入：

var o = {
    bind : function () {
        element.addEventListener('click', this, false);
    },
    handleEvent : function () {
        alert('handleEvent executed');
    }
};


var events = {
    handleEvent: function(event) {
        switch (event.type) {
            case 'touchstart': this.touchstart(event); break;
            case 'touchmove': this.touchmove(event); break;
            case 'touchend': touchend(event); break;
        }
    },
    touchstart:function(event){ },
    touchmove:function(event){ },
    touchend:function(event){ }
}
document.getElementById('elementID').addEventListener('touchstart',events,false);
document.getElementById('elementID').addEventListener('touchmove',events,false);
document.getElementById('elementID').addEventListener('touchend',events,false);