首页 » JavaScript » 事件委托

事件委托

对“事件处理程序过多”问题的解决访问就是事件委托。事件委托利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。例如,click事件会一直冒泡到document层次。也就是说,我们可以为整个页面指定一个onclick事件处理程序,而不必给每个可单击的元素分别添加事件处理程序。以下面的HTML代码为例。

<ul id="myLinks">
    <li id="goSomewhere">Go somewhere</li>
    <li id="doSomething">Do something</li>
    <li id="sayHi">Say hi</li>
</ul>

其中包含3个被单击后会执行操作的列表项。按照传统的做法,需要像下面这样为它们添加3个事件处理程序:

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};

var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething")
var item3 = document.getElementById("sayHi");

EventUtil.addHandler(item1, "click", function (event) {
    location.href = "https://www.w3cmm.com";
});
EventUtil.addHandler(item2, "click", function (event) {
    document.title = "我改变了文档的标题"
});
EventUtil.addHandler(item3, "click", function () {
    alert("hi");
});

如果在一个复杂的Web引用程序中,对所有可单击的元素都采用这种方式,那么结果就会有数不清的代码用于添加事件处理程序。此时,可以利用事件委托技术解决这个问题。使用事件委托,只需在DOM树中尽量最高层次上添加一个事件处理程序,如下面的例子所示:

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function (event) {
        return event ? event : window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    }
};

var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function (event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);

    switch (target.id) {
    case "goSomewhere":
        location.href = "https://www.w3cmm.com";
        break;
    case "doSomething":
        document.title = "我改变了文档的标题";
        break;
    case "sayHi":
        alert("hi");
        break;
    }
});

在这段代码里,我们使用事件委托只为<ul>元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的节点,而且它们的事件会冒泡,所有单击事件最终会被这个函数处理。我们知道,事件目标是被单击的列表项,故而可以通过检测id属性来决定采取适当的操作。与前面未使用事件委托的代码比较,会发现这段代码的事件消耗更低,因为值取得了一个DOM元素,只添加了一个事件处理程序。虽然对用户来说最后的结果相同,但这种技术占有的内存更少。所有用到按钮的事件(多数鼠标事件和键盘事件)都适合采用事件委托技术。

如果可行的话,也可以考虑为document对象添加一个事件处理程序,用以处理页面上发生的某种特定类型的事件。这样做与采取传统的做法相比具有如下优点。

  • document对象很快就可以访问,而且可以在页面生命周期的任何时点上为它添加事件处理程序(无需等待DOMContentLoaded或load事件)。换句话说,只要单击的元素呈现在页面上,就可以立即具备适当的功能。
  • 在页面中设置事件处理程序所需要的时间更少。只添加一个事件处理程序所需要的DOM引用更少。
  • 整个页面占用的内存空间更少,能够提升整体性能。

最适合采用事件委托技术的事件包括click、mousedown、mouseuup、keydown、keyup和keypress。虽然mouseover和mouseout事件也冒泡,但适当处理它们并不容易,而且经常需要计算元素的位置(因为当鼠标从一个元素移到其子节点时,或者当鼠标移除该元素时,都会触发mouseout事件)。

此文章发表在 JavaScript. 将 固定链接 加入收藏.