addEventListener()
方法是将指定的事件监听器注册到目标对象上,当该对象触发指定的事件时,指定的回调函数就会被执行。
语法:
element.addEventListener(type, listener[, useCapture]);
其中listener:当指定的事件类型发生时被通知到的一个对象。该参数必是实现EventListener接口的一个对象或函数。
即,第二个参数除了可以传入函数外,还可以传入对象。
那么实现EventListener接口的对象有什么特征呢?
// 注意:该接口属于DOM2, 所以IE6~IE8不能直接使用哦~
interface EventListener {
void handleEvent(Event evt);
};
也就是说事件会自动在传入对象中寻找handleEvent方法。
这样做的好处之一:
1 var obj = { 2 name: ‘foo‘, 3 handleEvent: function() { 4 alert(‘click name=‘+ this.name); 5 } 6 }; 7 document.body.addEventListener(‘click‘, obj, false);
这样,在 element 触发event事件后,调用的是handleEvent 方法,且其中的 this 是指实现EventListener接口的对象,这里指向obj对象。而普通的函数中的this 指向事件源:
1 document.body.addEventListener(‘click‘, function() { 2 console.log(this == document.body); // output: true 3 }, false);
好处之二:
1 var obj = { 2 name: ‘foo‘, 3 handleEvent: function() { 4 alert(‘click name=‘+ this.name); 5 } 6 }; 7 8 document.body.addEventListener(‘click‘, obj, false); 9 10 function changeHandler() { 11 obj.handleEvent = function() { 12 alert("change the click handle!"); 13 }; 14 } 15 16 // 5秒后动态改变事件处理函数 17 setTimeout(function() { 18 changeHandler(); 19 }, 5000);
这样就可以动态切换绑定事件的处理函数,而不需要remove之前的事件。
总结:
使用这种绑定对象的方式,而不是和具体的函数耦合,更有面向对象的感觉了,呵呵。
有理解错误的地方,还望大家多多指教~
时间: 2024-08-13 17:57:47