百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

事件委托

作者翟思源课程第二十到第二十一天:让你和页面对话825次浏览102018-05-13 21:18

在JavaScript程序中事件处理的数量直接影响了页面的整体性能,当时间处理程序过多时,例如:给100个按钮绑定事件。传统的做法就是:通过DOM操作获取每一个按钮元素分别绑定事件处理函数。

而每一个函数都是一个对象,所以都会占用内存,内存占用的越多性能毋庸置疑的会变得越差;而且每次通过DOM访问到触发事件的元素也无疑会增加交互时间延缓事件处理速度降低性能。而为了尽可能减少这种性能的消耗就引入了事件委托这一解决方案。

所谓事件委托就是利用事件冒泡,指定一个事件处理程序,来管理多个事件。即:利用冒泡机制将一类事件触发尽可能高的委托给其父节点或祖先节点来触发事件处理函数,这样只需要定义一个函数,访问一次DOM对象,减少了内存的占用以及访问DOM元素的时间,降低了性能的消耗。

举个栗子:

       ` <div id="btn-warp">  
        <button id="btn1">btn1</button>  
        <button id="btn2">btn2</button>  
        <button id="btn3">btn3</button>  
    </div>  

    <script>  
        //传统方法  
        var btn1 = document.getElementById("btn1");  
        var btn2 = document.getElementById("btn2");  
        var btn3 = document.getElementById("btn3");  
        btn1.onclick = function(){  
            alert("btn1");  
        }  
        btn2.onclick = function(){  
            alert("btn2");  
        }  
        btn3.onclick = function(){  
            alert("btn3");  
        }  

        // 利用事件委托  
        var btns = document.getElementById("btn-warp");  
        btns.onclick = function(event){  
                    // event.target 事件源  
                     switch (event.target.id) {  
                case "btn1":  
                    alert("btn1");  
                    break;  
                case "btn2":  
                    alert("btn2");  
                    break;  
                case "btn3":  
                    alert("btn3");  
                    break;  
            }  
        }  

                //事件委托jQuery写法  
                // 在jQuery1.7版本中on()函数替代了 delegate()以及bind()、live()  
                 $("#btn-warp").on("click",function(event){  
                      switch (event.target.id) {  
                        case "btn1":  
                            alert("btn1");  
                            break;  
                        case "btn2":  
                            alert("btn2");  
                            break;  
                        case "btn3":  
                            alert("btn3");  
                            break;  
                    }  
                });  
     </script>  `

**

最适合事件委托的事件有:click、mousedown、mouseup、keydown、keyup、keypress

0条评论