js 事件委托

js事件流分为冒泡捕捉两种方向,记录一个事件委托片段,注意兼容性:

html

<html>
<style>
ul{
	list-style:none;
}
</style>
<body>
	<ul id="ulele"><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li><li>d</li></ul>
</body>
</html>

js

var target = document.getElementById("ulele");
EventListener = {
	addListener:function(target, type, handler){
		if(document.addEventListener){
			target.addEventListener(type, handler, false);
		}else if(document.attachEvent){
			target.attachEvent("on" + type, handler);
		}else{
			target["on" + type] = handler;
		}
	},
	removeListener:function(target, type, handler){
		if(document.removeEventListener){
			target.removeEventListener(type, handler, false);
		}else if(document.detachEvent){
			target.detachEvent("on" + type, handler);
		}else{
			target["on" + type] = null;
		}
	}
}
EventListener.addListener(target, "click", clickHandler);
//EventListener.removeListener(target, "click", clickHandler);
function clickHandler(e){
	var e = e || event, target = e.target || e.srcElement;
	
	/* if (e.preventDefault) { e.preventDefault();//IE以外 } else { e.returnValue = false;} return false 只能取消元素 stopPropagation() cancelBubble()*/
	
	if(target.nodeName.toLowerCase() == "li"){
		alert("pageX:"+ (e.pageX || e.x)  + ";pageY:" + (e.pageY || e.y));
	}
}


你可能感兴趣的:(js 事件委托)