面试笔记（六）---Js实现eventHandler

系统管理员 2022-05-17 23:17 116阅读 0赞

#  #

**js****事件的监听器的使用**

1、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。如下：

**\[javascript\]** [view plain][] [copy][view plain]

1.  <span style="font-size:18px;">window.onload = **function**()\{ 
2.  **var** btn = document.getElementById("yuanEvent"); 
3.   btn.onclick = **function**()\{ 
4.   alert("第一个事件"); 
5.   \} 
6.   btn.onclick = **function**()\{ 
7.   alert("第二个事件"); 
8.   \} 
9.   btn.onclick = **function**()\{ 
10.  alert("第三个事件"); 
11.  \} 
12. \}</span>

最后只输出：第三个事件，因为后一个方法都把前一个方法覆盖掉了。  
  
原生态的事件绑定函数addEventListener：

**\[javascript\]** [view plain][] [copy][view plain]

1.  **var** eventOne = **function**()\{ 
2.   alert("第一个监听事件"); 
3.  \} 
4.  **function** eventTwo()\{ 
5.   alert("第二个监听事件"); 
6.  \} 
7.  window.onload = **function**()\{ 
8.  **var** btn = document.getElementById("yuanEvent"); 
9.  //addEventListener：绑定函数
10.  btn.addEventListener("click",eventOne); 
11.  btn.addEventListener("click",eventTwo); 
12. \}

输出：第一个监听事件 和 第二个监听事件  
  
2、采用事件监听给对象绑定方法后，可以解除相应的绑定，写法如下：

**\[javascript\]** [view plain][] [copy][view plain]

1.  **var** eventOne = **function**()\{ 
2.   alert("第一个监听事件"); 
3.  \} 
4.  **function** eventTwo()\{ 
5.   alert("第二个监听事件"); 
6.  \} 
7.  window.onload = **function**()\{ 
8.  **var** btn = document.getElementById("yuanEvent"); 
9.   btn.addEventListener("click",eventOne); 
10.  btn.addEventListener("click",eventTwo); 
11.  btn.removeEventListener("click",eventOne); 
12. \}

输出：第二个监听事件  
  
3、解除绑定事件的时候一定要用函数的句柄，把整个函数写上是无法解除绑定的。  
错误写法：

**\[javascript\]** [view plain][] [copy][view plain]

1.  btn.addEventListener("click",**function**()\{ 
2.   alert(11); 
3.  \}); 
4.  btn.removeEventListener("click",**function**()\{ 
5.   alert(11); 
6.  \});

正确写法：

**\[javascript\]** [view plain][] [copy][view plain]

1.  btn.addEventListener("click",eventTwo); 
2.  btn.removeEventListener("click",eventOne);

总结：对函数进行封装后的监听事件如下，兼容各大主流浏览器。

**\[javascript\]** [view plain][] [copy][view plain]

1.  /\*
2.   \* addEventListener:监听Dom元素的事件
3.   \* 
4.   \* target：监听对象
5.   \* type：监听函数类型，如click,mouseover
6.   \* func：监听函数
7.   \*/
8.  **function** addEventHandler(target,type,func)\{ 
9.  **if**(target.addEventListener)\{ 
10. //监听IE9，谷歌和火狐
11.  target.addEventListener(type, func, **false**); 
12.  \}**else** **if**(target.attachEvent)\{ 
13.  target.attachEvent("on" \+ type, func); 
14.  \}**else**\{ 
15.  target\["on" \+ type\] = func; 
16.  \} 
17. \} 
18. /\*
19.  \* removeEventHandler:移除Dom元素的事件
20.  \* 
21.  \* target：监听对象
22.  \* type：监听函数类型，如click,mouseover
23.  \* func：监听函数
24.  \*/
25. **function** removeEventHandler(target, type, func) \{ 
26. **if** (target.removeEventListener)\{ 
27. //监听IE9，谷歌和火狐
28.  target.removeEventListener(type, func, **false**); 
29.  \} **else** **if** (target.detachEvent)\{ 
30.  target.detachEvent("on" \+ type, func); 
31.  \}**else** \{ 
32. **delete** target\["on" \+ type\]; 
33.  \} 
34. \} 
35. **var** eventOne = **function**()\{ 
36.  alert("第一个监听事件"); 
37. \} 
38. **function** eventTwo()\{ 
39.  alert("第二个监听事件"); 
40. \} 
41. window.onload = **function**()\{ 
42. **var** bindEventBtn = document.getElementById("bindEvent"); 
43. //监听eventOne事件
44.  addEventHandler(bindEventBtn,"click",eventOne); 
45. //监听eventTwo事件
46.  addEventHandler(bindEventBtn,"click",eventTwo ); 
47. //监听本身的事件
48.  addEventHandler(bindEventBtn,"click",**function**()\{ 
49.  alert("第三个监听事件"); 
50.  \}); 
51. //取消第一个监听事件
52.  removeEventHandler(bindEventBtn,"click",eventOne); 
53. //取消第二个监听事件
54.  removeEventHandler(bindEventBtn,"click",eventTwo); 
55. \}

**\[javascript\]** [view plain][] [copy][view plain]

实例：

**\[html\]** [view plain][] [copy][view plain]

1.  <!DOCTYPE html**>**
2.  **<html>**
3.  **<head>**
4.  **<meta** http-equiv="Content-Type" content="text/html; charset=UTF-8"**>**
5.  **<title>**Event**</title>**
6.  **<script** type="text/javascript"**>**
7.   function addEventHandler(target,type,func)\{ 
8.   if(target.addEventListener)\{ 
9.   //监听IE9，谷歌和火狐
10.  target.addEventListener(type, func, false); 
11.  \}else if(target.attachEvent)\{ 
12.  target.attachEvent("on" + type, func); 
13.  \}else\{ 
14.  target\["on" + type\] = func; 
15.  \} 
16.  \} 
17.  function removeEventHandler(target, type, func) \{ 
18.  if (target.removeEventListener)\{ 
19.  //监听IE9，谷歌和火狐
20.  target.removeEventListener(type, func, false); 
21.  \} else if (target.detachEvent)\{ 
22.  target.detachEvent("on" + type, func); 
23.  \}else \{ 
24.  delete target\["on" + type\]; 
25.  \} 
26.  \} 
27.  var eventOne = function()\{ 
28.  alert("第一个监听事件"); 
29.  \} 
30.  function eventTwo()\{ 
31.  alert("第二个监听事件"); 
32.  \} 
33. window.onload = function()\{ 
34.  var bindEventBtn = document.getElementById("bindEvent"); 
35.  //监听eventOne事件
36.  addEventHandler(bindEventBtn,"click",eventOne); 
37.  //监听eventTwo事件
38.  addEventHandler(bindEventBtn,"click",eventTwo ); 
39.  //监听本身的事件
40.  addEventHandler(bindEventBtn,"click",function()\{ 
41.  alert("第三个监听事件"); 
42.  \}); 
43.  //取消第一个监听事件
44.  removeEventHandler(bindEventBtn,"click",eventOne); 
45.  //取消第二个监听事件
46.  removeEventHandler(bindEventBtn,"click",eventTwo); 
47.  \} 
48. **</script>**
49. 
50. 
51. **</head>**
52. **<body>**
53. **<input** type="button" value="测试" id="bindEvent"**>**
54. **<input** type="button" value="测试2" id="yuanEvent"**>**
55. **</body>**
56. **</html>**

[view plain]: https://blog.csdn.net/myjlvzlp/article/details/8121696