javasript事件委托笔记

最新推荐文章于 2025-01-26 20:46:00 发布

BaronHsu

最新推荐文章于 2025-01-26 20:46:00 发布

阅读量566

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/xuzhiwei13/article/details/7870660

javascript 专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个简单的JavaScript事件委托实现案例，通过将事件绑定在父级元素上，利用事件冒泡机制来触发子元素上的事件，以此提升代码效率并确保新增元素也能响应事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚刚看了个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>