标签：com http class blog style div img code java javascript width
最近看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元素绑定事件。
对象里的handleEvent,码迷,mamicode.com
标签：com http class blog style div img code java javascript width
原文地址：http://www.cnblogs.com/zsdblog/p/3698334.html
