js 事件委托是什么

最新推荐文章于 2024-08-09 16:54:24 发布

心郎

最新推荐文章于 2024-08-09 16:54:24 发布

阅读量2.4k

点赞数

分类专栏：前端_js

本文链接：https://blog.csdn.net/u011301203/article/details/53557638

版权

前端_js 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				border: 1px solid red;
			}
		</style>
		<!--
			什么是事件委托:让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
			应用:例如 实现动态事件的绑定
		-->
	</head>
	<body>
		<ul id="ul">
			<li>aaaaaaaa</li>
			<li>bbbbbbbb</li>
			<li>cccccccc</li>
		</ul>
		<input type="button" id="btn" />
		<script type="text/javascript">
		
			window.onload = function(){
				var oUl = document.getElementById("ul");
				var aLi = oUl.getElementsByTagName("li");
				var oBtn = document.getElementById("btn");
				var iNow = 4;
				
				//为已有元素绑定事件
				for(var i=0; i<aLi.length; i++){
					aLi[i].onmouseover = function(){
						this.style.background = "red";
					}
					aLi[i].onmouseout = function(){
						this.style.background = "";
					}
				}
				
				//添加元素
				oBtn.onclick = function(){
					iNow ++;
					var oLi = document.createElement("li");
					oLi.innerHTML = 1111 *iNow;
					oUl.appendChild(oLi);
					
					//在不使用jq的动态事件绑定 也不使用事件委托的情况下 为新创建的元素绑定事件
					//非常sb的做法是可以在添加元素后 重新为所有元素重新绑定一次
	//				var olis = document.querySelectorAll("ul>li");
	//				for(var i=0; i<olis.length; i++){
	//					olis[i].onmouseover = function(){
	//						this.style.background = "red";
	//					}
	//					olis[i].onmouseout = function(){
	//						this.style.background = "";
	//					}
	//				}
					
				}
				
				//ie：window.event.srcElement
				//标准下:event.target
				//事件委托 
				oUl.onmouseover = function(ev){
					var ev = ev || window.event;
					var target = ev.target || ev.srcElement;
					//target元素下的 localName属性默认是小写
					if(target.localName == "li"){
						target.style.background = "red";
					}
				}
				oUl.onmouseout = function(ev){
					var ev = ev || window.event;
					var target = ev.target || ev.srcElement;
					//target元素下的 nodeName模式是大写 需要转成小写 或判断=="LI"
					if(target.nodeName.toLowerCase() == "li"){
						target.style.background = "";
					}
				}
				
				
			}
			
			
		</script>
	</body>
</html>