javasript事件委托笔记

最新推荐文章于 2024-04-19 12:21:16 发布

BaronHsu

最新推荐文章于 2024-04-19 12:21:16 发布

阅读量516

点赞数 1

分类专栏： javascript 文章标签： function button

本文链接：https://blog.csdn.net/xuzhiwei13/article/details/7870660

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

刚刚看了个javasript事件委托的实例，于是乎我也动手做了个例子。

<!DOCTYPE html>
<html>
	<head>
		<title>js事件委托</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript">
			/*事件委托:
			 将原本是鼠标经过li的事件，委托给ul，其实就是通过冒泡的原来来进行传递的。
			 通过ul来进行处理，事件委托的好处1、提高性能 2、新增加元素也具有事件
			 * */
			window.onload = function() {
				var oUl = document.getElementById("ul1");
				var aLi = document.getElementsByTagName("li");
	            var oInput = document.getElementById("btn");
	            var liNum = aLi.length;
	            
				oUl.onmouseover = function(ev) {
					//事件兼容处理
					var ev = ev || window.event;
					//事件源
					var target = ev.target || ev.srcElement;
					if(target.nodeName.toLowerCase() == 'li') {
						target.style.background = 'red';
					}
				}

				oUl.onmouseout = function(ev) {
					//事件兼容处理
					var ev = ev || window.event;
					//事件源
					var target = ev.target || ev.srcElement;
					if(target.nodeName.toLowerCase() == 'li') {
						target.style.background = '';
					}

				}
				
				oInput.onclick = function(){
					liNum++;
					
					var oLi = document.createElement("li");
					oLi.innerHTML = 111 * liNum;
					oUl.appendChild(oLi);

					
				}
				
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="点击添加li" />
		<ul id="ul1">
			<li>111</li>
			<li> 222 </li>
			<li> 333 </li>
			<li> 444 </li>
		</ul>
	</body>
</html>