事件委派

最新推荐文章于 2022-05-22 11:43:23 发布

爱生活，爱编程

最新推荐文章于 2022-05-22 11:43:23 发布

阅读量212

点赞数 1

分类专栏： javascript基础笔记

本文链接：https://blog.csdn.net/qq_15009739/article/details/103945692

版权

javascript基础笔记专栏收录该内容

83 篇文章 1 订阅

订阅专栏

本来不打算写这个篇，没办法，我学了那么久，这点还是没学会，通过这篇文章，估计冒泡就学会了！

冒泡说白了，孩子不处理，交给父亲处理，这样，有俩好处

1，不需要给孩子添加事件，效率高些！

2，当添加一个孩子时，该孩子自带事件！（这个功能）很重要！

不多少，我将代码拿过来！

<!DOCTYPE html>
<html>
<head>
	<title>sdfsd</title>
	<style type="text/css">
		ul {
			list-style: none;
		}				
	</style>

</head>
<body>

	<ul id="ul">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
	</ul>

	<script type="text/javascript">
			window.onload = function(){
				var oUL = document.getElementById('ul');
				var oLis = document.getElementsByTagName("li");
				
				
				oUL.onmouseover = function(ev){
					var oEvent = ev|| window.event;
					var target = oEvent.target || oEvent.srcElement;
					// 只有当是li 的时候才执行！
					if(target.nodeName.toLowerCase() == "li"){
							target.style.background = "red";
					}
				}
					oUL.onmouseout = function(ev){
					var oEvent = ev|| window.event;
					var target = oEvent.target || oEvent.srcElement;
					target.style.background = "";
				}

			}	

	</script>
	

</body>
</html>

上面代码要说明的

1，事件对象的兼容写法！