事件委托机制

柔光的暖阳◎ 2022-06-07 13:16 299阅读 0赞

# 事件委托机制 #

事件委托机制是利用的是冒泡的原理的，把事件的监听转换到其父元素上，也就是把事件绑定到父元素上面，然后在事件中获取子元素的对象，对其进行相应的操作。

优点是：

1）能够提高性能，有些时候，如果一个元素中有许多的子元素，而且子元素上都需要有事件的绑定的话，我们给每一个子元素都添加一个事件的话，显得繁琐，而且很多时候都需要遍历父元素中的子元素。这时候，我们就可以使用事件委托机制，把需要绑定到子元素上的事件，都监听到父元素上，当触发子元素的事件的时候，因为冒泡的机制就会触发到父元素的事件，然后我们在事件中获取得到触发该事件的子元素的对象，对其进行相应的操作。

2）减少代码量。而且新添加的元素也可以直接绑定到事件的，不需要额外去绑定事件，因为事件已经绑定在父元素上了。

事件冒泡：事件促发的最深层元素首先接受事件，然后是它的父元素，然后依次往上，直到document对象接受最终的事件。

下面给一个例子说明事件委托机制的原理。

将鼠标悬浮至某个元素上，就会出现黄色的背景，然后点击按钮，可以往页面上添加元素，同时新添加的元素也是可以有悬浮然后出现黄色背景的效果。

![Center][]

testData
    		
    	
    	
    		
        
         1111 2222 3333 4444 
    	
    <script type="text/javascript">
    	var btn = document.getElementById("btn");
    	var uls = document.getElementById("ul1");
    	var length = uls.getElementsByTagName("li").length;
    	btn.onclick = function(){
    		var li = document.createElement("li");
    		length+=1;
    		li.innerHTML = length*1111;
    		console.log(li);
    		uls.appendChild(li);
    	}
    	uls.onmouseover = function (event){
    		var event = event || window.event;
    		var target = event.target || event.srcElement;
    		if(target&&target.nodeName==="LI"){
    			target.style.background="yellow";
    		}
    	}
    	uls.onmouseout = function (event){
    		var event = event || window.event;
    		var target = event.target || event.srcElement;
    		if(target&&target.nodeName==="LI"){
    			target.style.background="";
    		}
    	}
    </script>

![Center 1][]

[Center]: /images/20220607/c66c699da6a1445081efb5d55706e703.png
[Center 1]: /images/20220607/a23c1518de12456d83ddd1212e7d6f3f.png