首页 > 代码库 > 对象里的handleEvent

对象里的handleEvent

2024-07-02 00:17:42   225人阅读

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

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

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

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

html

<div id="box" style="background:#ccc;width:500px;height:200px">

 

var events={
    handleEvent:function(){alert(‘秋风落叶‘)}
}

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

例子2:

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)

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

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)

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


联系
我们