js handleEvent接口学习

来源：互联网发布：手机淘宝开店要钱吗编辑：程序博客网时间：2024/05/17 10:40

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);

0 0