http://www.fgm.cc/learn/lesson4/08.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件练习：封装兼容性添加、删除事件的函数</title>
<style>
span {
color: #999;
}
</style>
</head>
<body>
<div id="container">
<button id="useless-btn">毫无用处的按钮</button>
<button id="add-btn">绑定click事件</button>
<button id="remove-btn">解除绑定</button>
</div>
<script type="text/javascript">
var uselessBtn = document.getElementById('useless-btn');
var addBtn = document.getElementById('add-btn');
var removeBtn = document.getElementById('remove-btn');
var EventUtil = {
addHandler: function (element, eventType, handler) {
if (element.addEventListener) {
element.addEventListener(eventType, handler, false);
} else if (element.attachEvent) { // IE<=8
element.attachEvent('on' + eventType, handler);
} else { // DOM0
element['on' + eventType] = handler;
}
},
removeHandler: function (element, eventType, handler) {
if (element.removeEventListener) {
element.removeEventListener(eventType, handler, false);
} else if (element.detachEvent) { // IE<=8
element.detachEvent('on' + eventType, handler);
} else { // DOM0
element['on' + eventType] = null;
}
}
};
function show() {
alert('事件绑定成功');
};
EventUtil.addHandler(addBtn, 'click', function () {
EventUtil.addHandler(uselessBtn, 'click', show);
uselessBtn.innerHTML = '我可以点击了';
});
EventUtil.addHandler(removeBtn, 'click', function () {
EventUtil.removeHandler(uselessBtn, 'click', show);
uselessBtn.innerHTML = '毫无用处的按钮';
});
</script>
</body>
</html>
901
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
