星空网 > 软件开发 > Java

前端学习——实现事件代理

事件代理

  作为新人的我以前是这样绑定多个元素的

    

<ul>	<li>1</li>	<li>2</li>	<li>3</li>	<li>4</li>	<li>5</li>	<li>6</li>	<li>7</li>	...	<li>1000</li></ul><script type="text/javascript">	var lis=document.getElementsByTagName("li");	    for(var i in lis){			lis[i].onclick=function(){				alert(this.innerHTML);			}		}</script>

  这样绑定事件不仅仅是后添加的元素无法绑定这个事件,而且性能大大的降低,同时也会照成浏览器崩溃或者内存泄漏的事情。

 

  事件代理这时候就非常有用了。它把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。它主要利用事件冒泡来实现的,在冒泡过程通过判断元素是否是我们需要绑定的。

  

var aul=document.getElementById("cl");aul.onclick = function(event) {  e = event || window.event;  var eve = e.target || e.srcElement;  if (eve.nodeName=='LI') {	 console.log(eve);  }};

  事件代理带来了很多好处:那些需要创建的以及驻留在内存中的事件处理器少了。提高了性能,并降低了浏览器崩溃的风险。在DOM更新后无须重新绑定事件处理器了。




原标题:前端学习——实现事件代理

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

旺季不旺,FBA物流市场是否面临行业变局?:https://www.ikjzd.com/articles/101553
或遭受巨额罚款,亚马逊又被盯上了?:https://www.ikjzd.com/articles/101554
外贸货代收藏!报关电子委托书签约流程详解!:https://www.ikjzd.com/articles/101555
无VAT就封店,亚马逊欧洲站还做不做?:https://www.ikjzd.com/articles/101557
一位美国卖家想成立“差评”举报小组,网友:你干不过中国人的!:https://www.ikjzd.com/articles/10156
2019亚马逊Prime Day各站点畅销商品大起底!:https://www.ikjzd.com/articles/101560
去日本入住酒店,东西随意用却有一个特殊“要:https://www.vstour.cn/a/411241.html
中国有哪些著名的酒店品牌。:https://www.vstour.cn/a/411242.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流