js的事件委托

我会带着你远行 2022-03-19 06:23 266阅读 0赞

一、什么是事件委托

利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

二、为什么需要用事件委托

如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互          次数，提高性能

三、事件委托原理

利用的是事件冒泡的原理

四、实例

移到li时对应的li颜色变化

普通方式：

<ul id="ul1">
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
        </ul>
    <script>
        var oUl = document.getElementById("ul1")
            var oLi =oUl.getElementsByTagName("li")
            for(var i=0;i<oLi.length;i++){
                oLi[i].onmouseover = function(){
                    this.style.background = "red"
                }
                oLi[i].onmouseout = function(){
                    this.style.background = ""
                }
            }  
    </script>

委托方式：

<ul id="ul1">
                <li>111</li>
                <li>222</li>
                <li>333</li>
                <li>444</li>
        </ul>
    
    
    var oUl = document.getElementById("ul1");
            var oLi = oUl.getElementsByTagName("li");
            oUl.onmouseover = function(ev){
                var ev = ev||window.ev;
                var target = ev.target||ev.srcElement;
               
                if(target.nodeName.toLowerCase()=="li"){
                    target.style.background = "green"
                }
            }
            oUl.onmouseout = function(ev){
                var ev = ev||window.ev
                var target = ev.target||ev.srcElement;
                if(target.nodeName.toLowerCase()=="li"){
                    target.style.background = ""
                }
            }

委托例子：

<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>
    
    
    
    window.onload=function(){
                var obox = document.getElementById("box")
                obox.onclick = function(e){
                    var e = e||window.event
                    var target = e.target||e.srcElement;
                    console.log(target)
                    console.log(target.id)
                    console.log(target.nodeName)
                     if(target.nodeName.toLocaleLowerCase()=='input'){
                        switch(target.id){
                            case 'add' :
                                alert('添加');
                                break;
                            case 'remove' :
                                alert('删除');
                                break;
                            case 'move' :
                                alert('移动');
                                break;
                            case 'select' :
                                alert('选择');
                                break;
                    } 
                  }
                }
            }