`
alex_gao
  • 浏览: 79557 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

看代码， 如下：

 

<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注册事件响应也是可以传递参数的。

0
顶
3
踩
分享到：
| JS中事件流测试
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics