对象里的handleEvent

时间:2014-04-29 15:11:22   收藏:0   阅读:416

最近看swipe.js源码看到handleEvent这个属性。查了一下资料才知道:

使用 addEventListener 可以绑定事件,并传入回调函数。

Mozilla 0.9.1 和 Netscape 6.1 之后的版本不但支持传递函数引用,也都允许直接把拥有 handleEvent 方法的对象作为 addEventListener 方法的第二参数。

看例子1, 最简单的实现方式

html

mamicode.com,码迷
<div id="box" style="background:#ccc;width:500px;height:200px">
mamicode.com,码迷

 

mamicode.com,码迷
var events={
    handleEvent:function(){alert(‘秋风落叶‘)}
}

var elem = document.getElementById(‘box‘);
elem.addEventListener(‘click‘,events,false)
mamicode.com,码迷

例子2:

mamicode.com,码迷
var events={
    handleEvent:function(event){
        switch(event.type){
            case ‘click‘:
                this.click();break;
            case ‘mouseover‘:
                this.mouseover();break;
            case ‘mouseout‘:
                this.mouseout();break

        }
    },
    click:function(){
        console.log(‘click me‘)
    },
    mouseover:function(){
        console.log(‘mouseover‘)
    },
    mouseout:function(){
        console.log(‘mouseout‘)
    }
}
var elem = document.getElementById(‘box‘);
elem.addEventListener(‘click‘,events,false)
elem.addEventListener(‘mouseover‘,events,false)
elem.addEventListener(‘mouseout‘,events,false)
mamicode.com,码迷

例子3,这一个只是对上面的例子2进行了修改

mamicode.com,码迷
var events={
    handleEvent:function(event){
        switch(event.type){
            case ‘click‘:
                this.click();break;
            case ‘mouseover‘:
                this.mouseover();break;
            case ‘mouseout‘:
                this.mouseout();break

        }
    },
    click:function(){
        elem.addEventListener(‘mouseover‘,this,false)
        elem.addEventListener(‘mouseout‘,this,false)
        console.log(‘click me‘)
    },
    mouseover:function(){
        console.log(‘mouseover‘)
    },
    mouseout:function(){
        console.log(‘mouseout‘)
    }
}
var elem = document.getElementById(‘box‘);
elem.addEventListener(‘click‘,events,false)
mamicode.com,码迷

例子3 mouseover mouseout只有在click触发之后才对DOM元素绑定事件。

对象里的handleEvent,码迷,mamicode.com

评论(0
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码!