您的位置：首页 > 其它

事件练习：封装兼容性添加、删除事件的函数（实录四）

2017-07-11 00:00 393 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

事件练习：封装兼容性添加、删除事件的函数（实录 四）

事件练习：封装兼容性添加、删除事件的函数（实录四）