代码改变世界

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

2015-11-19 16:45  ARMdong  阅读(6724)  评论(1)  编辑  收藏  举报

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：

动态新增元素后效果：

事件委托的好处自己体会，文章就写到这里，感谢阅读！