javascript-事件委托的好处

  • 2017-09-24
  • 231
  • 2

事件委托
事件委托是利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。
用一个demo简单说下吧
现在前端开发中,为了挑高交互能力,越来越多的项页面中添加大量的事件处理程序,然而在页面上添加的事件处理程序的数量会直接影响到页面整体的运行性能,至于导致这样的原因,js高程中有很详细具体的解释,
1.每个函数都是对象,都会占用内存,内存越多,当然性能就会越差;
2.必须事先指定所有事件处理程序而导致的DOM访问次数,这样会延迟整个页面的交互就绪时间。
先看下面两个示例:



这是基本的用法,这样会在内存中添加了三个函数(对象),事件处理程序的DOM访问次数也曾家,这样的一个小型应用没什么影响,但是如果是做大型应用,编写高质量的代码是必须的,优雅的编写代码也是对自己的提升。
注:这里的EventUtil——跨浏览器的事件对象,是主要自己去封装的,具体可以参考这篇文章EventUtil.

var item1 = document.getElementById('liOne');
var item2 = document.getElementById('liTwo');
var item3 = document.getElementById('liThree');
EventUtil.addHandler(item1, "click", function(event) {
    console.log('do something.')
});
EventUtil.addHandler(item2, "click", function(event) {
    console.log('do something else.')
});
EventUtil.addHandler(item1, "click", function(event) {
    console.log('do another things.')
});

接下来就是我们说的重点了用事件委托的方式添加事件处理程序,简单来说就是DOM树中尽量高的层次添加一个事件处理器,如下:

var list = document.getElementById('mylinks');
EventUtil.addHandler(list, "click", function(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    switch(target.id) {
        case "liOne":
            console.log('so something');
            break;
        case "liTwo":
            console.log('so something else');
            break;
        case "liThree":
            console.log('so another things');
            break;          
    }
})

差距大家应该能看出来,首先页面设置事件处理程序所需的时间少了,整个页面占用的内存空间也少了,所转移性能上有所提升,不过这也是js基础的用法,当然我们要理解的原理更好啦,
最适合采用事件委托的事件一般包括click,mousedown,mouseup,keydowm,keyup等等。
它其实就是利用事件冒泡实现的,不熟悉事件冒泡的可以看我这边文章javascript–事件流

评论

  • 二狗回复

    66666

    • ytu回复

      (#^.^#)

- 友情链接 - Theme by Qzhai