<!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>