JavaScript事件代理

事件代理 (event delegation)

JavaScript事件代理是一种简单地技巧,通过它我们可以把事件处理器添加到一个父级元素上,这样就避免了把事件处理器添加到多个子集元素上

事件代理利用了两个在JavaScript事件中常会被忽略的两个特性:事件冒泡以及目标元素
举个例子:
现在页面中有一个列表结构

<ul id="ul1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>

现在需要给每个li添加点击事件,用一般的方法可能会遍历每个li给每个li单独添加点击事件,但是这样做的话会影响网站的性能而且可能会造成内存泄露,当创建了新的li时,已经遍历完了li,给已存li添加上事件了。所以,我们采用事件代理,也叫做事件委托来解决这个问题
我们可以给ul添加点击事件

		var ul = document.getElementById("ul1");
		ul.onmouseover = function(evnt){
			//考虑到兼容性
			var evnt = evnt || window.event;
			var target = evnt.target || evnt.srcElement;
			if(target.tagName.toLowerCase() =="li"){
			//li添加的事件
				alert("事件委托方法成功!");
			}
	}
	


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值