提升性能-事件委托技术

 ---
title: 提升性能——事件委托技术
date: 2016-05-11 22:13:43
tags: [javascript,improving performance, font-end]
---

提升页面性能之事件委托技术

(整理摘选自《Javascript高级程序设计》)
概述

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

实际例子

HTML部分

    <ul id = "mylinks">
        <li id = "goSomewhere">Go somewhere</li>
        <li id = "doSomewhere">Do somewhere</li>
        <li id = "sayHi">Say hi</li>
    </ul>

 

JS部分（暂不考虑兼容性）

    var list = document.getElementById("myLinks");

    list.addEventListener("click", function (event) {
    var target = event.target;
    switch(target.id){
        case "doSomething":
            document.title = "I changed the document's title";
            break;
        case "goSomewhere":
            location.href = "http://www.wrox.com";
            break;
        case "sayHi":
            alert("hi");
            break;
    }
    },false);
    

 

通过对ul添加onclick事件处理程序，用switch锁定target的id，就可以分别为每一个需要click事件的单项设置事件

优点

1. document对象很快就可以访问，可以在页面生命周期的任何时点上为它添加事件处理程序
2. 在页面中设置事件处理程序所需的时间更少
3. 整个页面占用的内存空间更少

各种事件的相性

适合：click,mousedown,mouseup,keydown,keyup,keypress
不适合：mouseover,mouseout