您的位置：首页 > 其它

使用DOM实现事件响应函数的注册、删除及事件传递的终止

2013-02-28 14:00 453 查看

看代码，如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">

// inner的响应函数
var clickInner = function(e){
alert(1.1);
};

// banner的响应函数
var clickBanner = function(e){
alert(2.1);
}

// body的响应行数
var clickBody = function(e){
alert(3.1);
}

// 注册事件响应
var addEventHandler = function(){
var inner = document.getElementById('inner');
var banner = document.getElementById('banner');
var cancelEvevntBtn = document.getElementById('cancelEvevnt');
if(inner.addEventListener){
inner.addEventListener('click',clickInner,true);
banner.addEventListener('click',clickBanner,true);
document.body.addEventListener('click',clickBody,true);
}else if(inner.attachEvent){
inner.attachEvent('onclick',clickInner);
}
}

// 删除事件响应
var removeEventHandler = function(){
var inner = document.getElementById('inner');
var banner = document.getElementById('banner');
var cancelEvevntBtn = document.getElementById('cancelEvevnt');
if(inner.removeEventListener){
inner.removeEventListener('click',clickInner,true);
banner.removeEventListener('click',clickBanner,true);
document.body.removeEventListener('click',clickBody,true);
}else if(inner.detachEvent){
inner.detachEvent('onclick',clickInner);
}
}

// 删除捕获事件响应，IE不知捕获事件流，所以IE下无效
var removeCapEventHandler = function(){
var banner = document.getElementById('banner');
if(banner.removeEventListener){
banner.removeEventListener('click',clickBanner,true);
banner.addEventListener('click',function(e){
alert(2.1);
e.stopPropagation();
},true);
}
}

// 删除冒泡的事件响应
var removeBubEventHandler = function(){
window.clickHandlerOnDiv = function(e){
alert(2);
var ev = e || event;
if(ev.stopPropagation){
ev.stopPropagation();
}else {
ev.cancelBubble = true;
}
}
}

// 给按钮增加响应事件
document.onreadystatechange = function () {
if(document.readyState=="complete") {
var addBtn = document.getElementById('addEvent');
var removeBtn = document.getElementById('removeEvent');
var removeCaptureEvent = document.getElementById('removeCaptureEvent');
var removeBubbleEvent = document.getElementById('removeBubbleEvent');
if(addBtn.addEventListener){
addBtn.addEventListener('click',addEventHandler,false);
removeBtn.addEventListener('click',removeEventHandler,false);
removeCaptureEvent.addEventListener('click',removeCapEventHandler,false);
removeBubbleEvent.addEventListener('click',removeBubEventHandler,false);
}else if(addBtn.attachEvent){
addBtn.attachEvent('onclick',addEventHandler);
removeBtn.attachEvent('onclick',removeEventHandler);
removeBubbleEvent.attachEvent('onclick',removeBubEventHandler);
}
}
}

clickHandlerOnBody = function(e){
alert(3);
}
clickHandlerOnDiv = function(e){
alert(2);
}

clickHandlerOnInner = function(e){
alert(1);
}

</script>
<title>Demo System</title>
</head>
<body id="body" onclick="clickHandlerOnBody()">
body
<div id='banner' style="width:100px;height:100px;background-color:red;"
onclick="clickHandlerOnDiv(event)">
banner
<div id='inner' style="width:50px;height:50px;background-color:yellow;"
onclick="clickHandlerOnInner()">inner</div>
</div>
<br>
<input id="addEvent" value="添加事件监听" type="button"/>
<input id="removeEvent" value="取消事件监听" type="button"/>
<input id="removeCaptureEvent" value="停止捕获事件流" type="button"/>
<input id="removeBubbleEvent" value="停止冒泡事件流" type="button"/>
</body>
</html>

对部分代码进行说明：

1.var ev = e || event;

firefox将消息对象作为参数传递到响应函数（e），而IE则定义为全局变量event（window下）。

2.window.clickHandlerOnDiv

全局方法可用通过这种方式进行重写。

3.clickHandlerOnDiv(event)

通过HTML注册事件响应也是可以传递参数的。

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

标签：

相关文章推荐

新的分享

章节导航