一分钟教你用javascript原生代码实现事件委托

最新推荐文章于 2022-07-22 14:53:56 发布

weixin_30437337

最新推荐文章于 2022-07-22 14:53:56 发布

阅读量58

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ARMdong/articles/javascript_delegate.html

本文详细介绍了JavaScript中的事件委托概念，解释了其如何利用事件冒泡原理提高JS性能，并通过实例展示了如何为动态添加的元素绑定事件。

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

1、什么是事件委托（代理）？

——javascript中的事件委托就是利用冒泡原理，将事件绑定到节点的父级节点上，从而触发这些节点执行代码中编写的效果；

2、事件委托的好处：

　　1）、提高js性能；

　　2）、后续添加的元素同样能触发事件；

3、理解委托需要掌握的知识点：事件源（event对象中的事件源：无论在哪个事件中，当前操作的元素就是事件源）

　　IE浏览器中的事件源：window.event.srcElement

　　标准浏览器中的事件源：event.target

4、通过示例代码理解事件委托：

HTML结构：

<body>
	<input id="input1" type="button" value="Add">
	<ul id="ul1">
		<li>1111</li>
		<li>2222</li>
		<li>3333</li>
		<li>4444</li>
	</ul>
</body>

Javascript代码：

<script>
	window.onload = function(){

		var oUl = document.getElementById('ul1');
		var oInput = document.getElementById('input1');
		iNow = 4;

		oInput.onclick = function(){
			iNow ++;
			var oLi = document.createElement('li');
			oLi.innerHTML = 1111 * iNow;
			oUl.appendChild(oLi);
		};

		oUl.onmouseover = function(event){
			var event = event || window.event;
			var target = event.target || event.srcElement;
			if(target.nodeName.toLowerCase() === 'li'){
				target.style.background = 'red';
			}
		};

		oUl.onmouseout = function(event){
			var event = event || window.event;
			var target = event.target || event.srcElement;
			if(target.nodeName.toLowerCase() === 'li'){
				target.style.background = '';
			}
		};

	};
</script>

效果图1：