标签:
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