javascript 事件练习：封装兼容性添加、删除事件的函数、addEventListener用法

怼烎@ 2021-11-17 13:30 303阅读 0赞

![在这里插入图片描述][20190730224649986.PNG]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>事件练习：封装兼容性添加、删除事件的函数</title>
    		<script type="text/javascript">
    			//封装一个函数
    			window.onload = function() { 
    				var EventUtil = { 
    					addEvent: function(element, type, handler) { 
    						if (element.addEventListener) { 
    							element.addEventListener(type, handler, false);
    						} else if (element.attachEvent) { 
    							element.attachEvent('on' + type, handler);
    						} else { 
    							element['on' + type] = handler;
    						}
    					},
    
    					removeEvent: function(element, type, handler) { 
    						if (element.removeEventListener) { 
    							element.removeEventListener(type, handler, false);
    						} else if (element.detachEvent) { 
    							element.detachEvent('on' + type, handler);
    						} else { 
    							element['on' + type] = null;
    						}
    					}
    				}
    				var aBtn = document.getElementsByTagName("input");
    				//为第一个按钮添加绑定事件
    				EventUtil.addEvent(aBtn[1], "click", function() { 
    					EventUtil.addEvent(aBtn[0], "click", fnHandler);
    					aBtn[0].value = "我可以点击了"
    				});
    
    				//解除第一个按钮的绑定事件
    				EventUtil.addEvent(aBtn[2], "click", function() { 
    					EventUtil.removeEvent(aBtn[0], "click", fnHandler);
    					aBtn[0].value = "毫无用处的按钮"
    				});
    
    				//事件处理函数
    				function fnHandler() { 
    					alert("事件绑定成功！")
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<center><input type="button" value="毫无用处的按钮"> <input type="button" value="绑定click"> <input type="button" value="解除绑定"></center>
    	</body>
    </html>

[20190730224649986.PNG]: /images/20211116/6adaae7cebb24e6fadf9161e13ec9e03.png