事件的委托

最新推荐文章于 2019-09-11 00:26:47 发布

沈志勇说

最新推荐文章于 2019-09-11 00:26:47 发布

阅读量665

点赞数

分类专栏： javascript笔记文章标签： javascript 事件委托

本文链接：https://blog.csdn.net/u011456552/article/details/52623125

版权

javascript笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

之前给li写事件的时候发现，用代码新添加的li不能像之前的事件。如同下图！

后来改变看到有事件委托就可以修复这个bug!就试了试！

以下是全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		li{
			border: 1px solid red;
		}
	</style>
	<script type="text/javascript">
		window.οnlοad=function () {
			var oUl = document.getElementById('ul')
			var aLi = document.getElementsByTagName('li');
			var obtn = document.getElementById('btn');

			var num = parseInt(aLi.length);
			obtn.οnclick=function(){
				num++;
				var addLi = document.createElement('li');
				addLi.innerHTML =  num;
				oUl.appendChild(addLi);
			}

			//for(var i=0;i<aLi.length;i++){
				//普通写法
				// aLi[i].onmouseover = function(){
				// 	this.style.background ='red';
				// }
				// aLi[i].onmouseout = function(){
				// 	this.style.background ='';
				// }	
			//}
			
			//委托
			oUl.onmouseover = function(ev){
				//为了兼容IE
				var oEvent = ev||window.event;
				var target = oEvent.target|| oEvent.srcElement;
				if(target.nodeName.toLowerCase() == 'li'){
					target.style.background = 'red';
				}
			}
			oUl.onmouseout = function(ev){
				var oEvent = ev||window.event;
				var target = oEvent.target|| oEvent.srcElement;
				if(target.nodeName.toLowerCase() == 'li'){
					target.style.background = '';
				}
			}
		}
	</script>
</head>
<body>
	<ul id="ul">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
	</ul>	
	<button id="btn" >创建</button>
</body>
</html>

在这里委托的优点很明显，没了循环。提高了性能。而且，用普通写法的话，添加li标签之前，for循环就执行完了！

沈志勇说

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件的委托

之前给li写事件的时候发现，用代码新添加的li不能像之前的事件。如同下图！后来改变看到有事件委托就可以修复这个bug!就试了试！以下是全部代码： Document li{ border: 1px solid red; } window.onload=function () { var oUl = do
复制链接

扫一扫