JavaScript之事件委托

事件委托又名事件代理，是利用事件冒泡原理实现的，那事件冒泡是什么呢，就是事件从最深的节点开始，然后逐步向上传播事件。

就事件委托举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们的父级代为执行事件。

事件委托的实现：

给一段HTML

<ul id='oUl'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

先看一般方法的例子，

window.onload = function(){
    var oUl = documnent.getElementById('oUl');
    var oLi = document.getElementsByTagName('li');
    for(var i=0;i < oLi.length;i++)
    {
        oLi[i].onclick = function() {
                             alert('li');
                             }
    }

这样的话就要有很多次DOM操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；

下面是用事件委托处理：

window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

这样当点击ul以及其子元素时都会触发该事件，缺点是不能确定点击的是不是li，解决方法是e.target,target返回事件的事件源，即返回事件的目标节点，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写（使用toLowerCase()方法）再做比较（习惯问题）：

window.onload = function(){
		    　　var oUl = document.getElementById("ul1");
		    　　oUl.onclick = function(ev){
		    	　　　　var ev = ev || window.event;
		   		　　　　var target = ev.target || ev.srcElement;
		        　　　　if(target.nodeName.toLowerCase() == 'li'){
		        　 　　　　　　	alert(123);
		　　　　　　　  alert(target.innerHTML);
				　　　　}
		    　　}
		}

这样就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作。

如果我们想点击每一个li元素实现不同的功能，可以使用选择结构，比如switch-case，实例代码段如下：

HTML：

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>

JS：

window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == 'input'){
                    switch(target.id){
                        case 'add' :
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                    }
                }
            }
            
        }

什么样的事件可以用事件委托，什么样的事件不可以用：

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。

以上是根据大神的进行摘录，大神链接：https://www.cnblogs.com/liugang-vip/p/5616484.html

JavaScript之事件委托

猜你喜欢