事件的委托

川长思鸟来 2022-09-26 12:59 180阅读 0赞

之前给li写事件的时候发现，用代码新添加的li不能像之前的事件。如同下图！

![20160922200151222][]

后来改变看到有事件委托就可以修复这个bug!就试了试！

![20160922200457629][]

以下是全部代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		li{
    			border: 1px solid red;
    		}
    	</style>
    	<script type="text/javascript">
    		window.οnlοad=function () {
    			var oUl = document.getElementById('ul')
    			var aLi = document.getElementsByTagName('li');
    			var obtn = document.getElementById('btn');
    
    			var num = parseInt(aLi.length);
    			obtn.οnclick=function(){
    				num++;
    				var addLi = document.createElement('li');
    				addLi.innerHTML =  num;
    				oUl.appendChild(addLi);
    			}
    
    			//for(var i=0;i<aLi.length;i++){
    				//普通写法
    				// aLi[i].onmouseover = function(){
    				// 	this.style.background ='red';
    				// }
    				// aLi[i].onmouseout = function(){
    				// 	this.style.background ='';
    				// }	
    			//}
    			
    			//委托
    			oUl.onmouseover = function(ev){
    				//为了兼容IE
    				var oEvent = ev||window.event;
    				var target = oEvent.target|| oEvent.srcElement;
    				if(target.nodeName.toLowerCase() == 'li'){
    					target.style.background = 'red';
    				}
    			}
    			oUl.onmouseout = function(ev){
    				var oEvent = ev||window.event;
    				var target = oEvent.target|| oEvent.srcElement;
    				if(target.nodeName.toLowerCase() == 'li'){
    					target.style.background = '';
    				}
    			}
    		}
    	</script>
    </head>
    <body>
    	<ul id="ul">
    		<li>1</li>
    		<li>2</li>
    		<li>3</li>
    		<li>4</li>
    		<li>5</li>
    		<li>6</li>
    		<li>7</li>
    	</ul>	
    	<button id="btn" >创建</button>
    </body>
    </html>

在这里委托的优点很明显，没了循环。提高了性能。而且，用普通写法的话，添加li标签之前，for循环就执行完了！

[20160922200151222]: /images/20220717/87a39fbe308b40fe9bda06ad95be45a2.png
[20160922200457629]: /images/20220717/5a9afc4a5bde4f609ebebd6ed384e498.png