js 事件委托
博客专区 > appleZ 的博客 > 博客详情
js 事件委托
appleZ 发表于3年前
js 事件委托
  • 发表于 3年前
  • 阅读 29
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 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 = {
	add: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;
		}
	},
	remove: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.add(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));
	}
}

 

共有 人打赏支持
粉丝 2
博文 25
码字总数 9774
×
appleZ
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: