标签:
addEventListener()
方法是将指定的事件监听器注册到目标对象上,当该对象触发指定的事件时,指定的回调函数就会被执行。element.addEventListener(type, listener[, useCapture]);
interface EventListener {
// 注意:该接口属于DOM2, 所以IE6~IE8不能直接使用哦~
void handleEvent(Event evt);
};
1 var obj = {
2 name: ‘foo‘,
3 handleEvent: function() {
4 alert(‘click name=‘+ this.name);
5 }
6 };
7 document.body.addEventListener(‘click‘, obj, false);
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);
1 var obj = {
2 name: ‘foo‘,
3 handleEvent: function(e) {
4 switch(e.type) {
5 case "click":
6 console.log("click event");
7 break;
8 case "mousedown":
9 console.log("mousedown event");
10 break;
11 }
12 }
13 };
14
15 document.body.addEventListener(‘click‘, obj, false);
16 document.body.addEventListener(‘mousedown‘, obj, false);
这样可以把不同事件的处理逻辑放到一起,根据事件类型区分即可,而不用为每个事件类型定义不同的处理函数了。
因为处理逻辑都在同一对象中,也使程序更加“内聚”了。
标签:
原文地址:http://www.cnblogs.com/langjt/p/4324578.html