【读书笔记】：《编写可维护的JavaScript》第07章 事件处理

第07章 事件处理

7.1 典型用法

当事件触发时，事件对象（event对象）会作为回调参数传入事件处理程序中。event对象包含所有和事件相关的信息，包括事件的宿主（target）以及其他和事件类型相关的数据。鼠标事件会将其位置信息暴露在event对象上，键盘事件会将案件信息暴露在event对象上，触屏事件会将触摸位置和持续时间暴露在event 对象上。只有提供了所有这些信息，UI才会正确地执行交互。

在很多场景中，你只是用到了event所提供信息的一小部分，看下面这段代码。

// 不好的写法
function handleClick(event) {
    "use strick";
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

尽管这段代码看起来非常简单并且没什么问题，但实际上是不好的写法，因为这种做法有局限性。

7.2 规则1：隔离应用逻辑

上段实例代码的第一个问题是事件处理程序包含了应用逻辑（application logic）。应用逻辑是和应用相关的功能性代码，而不是和用户行为相关的。上段代码中，应用逻辑是在特定位置显示一个弹出框。尽管这个交互应当是在用户点击某个特定元素时发生，但情况并不总是如此。

将应用逻辑从所有事件处理程序中抽离出来的做法是一种最佳实践，因为说不定什么时候其他地方就会触发同一段逻辑。比如，有时你需要用户鼠标移到某个元素上时判断是否显示弹出框，或者按下键盘的某个键时也作同样的逻辑判断。这样多个时间的处理程序执行了同样的逻辑，而你的代码却不小心复制了多份。

如果对上段实例代码进行重构，第一步是将处理弹出框逻辑代码放入一个单独的函数中，这个函数很可能挂载于为该应用定义的一个全局对象上。事件处理程序应当总是在一个相同的全局对象中，因此就有了以下两个方法：

var MyApplication = {
    handleClick: function (event) {
        "use strict";
        this.showPopup(event);
    },

    showPopup: function (event) {
        "use strict";
        var popup = document.getElementById("popup");
        popup.style.left = event.clientX + "px";
    }
};

addListener(element, "click", function (event) {
    "use strict";
    MyApplication.handleClick(event);
});

之前的事件处理程序中包含的所有应用逻辑现在转移到了MyApplication.showPopup()方法中。现在MyApplication.handleClick()方法只做一件事情，即调用MyApplication.showPopup()。

7.3 规则2：不要分发事件对象

在剥离出应用逻辑之后，上段代码还存在一个问题，即event对象被无节制地分发。它从匿名的事件处理函数传入了MyApplication.handleClick()，然后又传入了MyApplication.showPopup()。正如上文提到的，event对象上包含很对和事件相关的额外信息，而这段代码只用到了其中的两个而已。

应用逻辑不应当依赖event对象来正确完成功能，原因如下：
如果你想测试这个方法，你必须重新创建一个event对象并将它作为参数传入。
最佳的办法是让事件事件处理程序使用event对象来处理事件，然后拿到所有需要的数据传给应用逻辑。例如 MyApplication.showPopup() 方法只需要使用两个数据，x坐标和y坐标：

// 好的写法
var MyApplication= {
    handleClick: function (event) {
        "use strict";
        this.showPopup(event.clientX, event.clientY);
    },

    showPopup: function (x, y) {
        "use strict";
        var pupup = document.getElementById("popup");
        pupup.style.left = x;
        pupup.style.top = y;
        pupup.className = "reveal";
    }
};

addListener(element, "click", function (event) {
    "use strict";
    MyApplication.handleClick(event);
});

这段重写的代码中，MyApplication.handleClick() 将 x 坐标和 y 坐标传入了MyApplication.showPopup()。代替了之前传入的事件对象。可以很清晰地看到MyApplication.showPopup()所期望传入的参数，并且测试或代码的任意位置都可以很轻松地直接调用这段逻辑：

MyApplication. showPopup(10,20);

当处理事件时，最好让事件处理城西称谓接触到event对象的唯一函数。事件处理程序应当在进入应用逻辑之前针对event对象执行任何必要的操作，包括阻止默认事件或事件冒泡，都应当直接包含在事件处理程序中。

var MyApplication = {
    handleClick: function (event) {
        "use strict";
        // 假设事件支持 DOM Level2
        event.preventDefault();
        event.stopPropagation();
        this.showPopup(event.clientX, event.clientY);
    },

    showPopup: function (x, y) {
        "use strict";
        var pupup = document.getElementById("popup");
        pupup.style.left = x;
        pupup.style.top = y;
        pupup.className = "reveal";
    }
};

addListener(element, "click", function (event) {
    "use strict";
    MyApplication.handleClick(event);
});