Javascript 回调和事件（翻译）（3）

解决方案

我想到了个解决方案，就是将回调和事件结合起来。可以先建立个事件，当回调触发时才运行它。由于每个事件都有其独立的运行环境（execution context），那么即使其中某个事件抛出了异常将不会影响其他的回调。

这听起来有点复杂，还是代码说话吧。

var currentHandler;// 标准事件支持if (document.addEventListener) {    document.addEventListener("fakeEvents", function() {        // 执行回调        currentHandler();    }, false);    // 新建事件    var dispatchFakeEvent = function() {        var fakeEvent = document.createEvent("UIEvents");        fakeEvent.initEvent("fakeEvents", false, false);        document.dispatchEvent(fakeEvent);    };} else {    // 针对 IE 的代码在后面详细阐述}var onLoadHandlers = [];// 将回调加入数组中function addOnLoad(handler) {    onLoadHandlers.push(handler);};// 逐条取出回调，并利用上述新建的事件执行onload = function() {    for (var i = 0; i < onLoadHandlers.length; i++) {        currentHandler = onLoadHandlers[i];        dispatchFakeEvent();    }};

万事俱备，让我们将上面坨代码扔到我们新的回调系统中

addOnLoad(function() {  console.log("Init: 1");  DOES_NOT_EXIST++; // 这里会抛出异常});addOnLoad(function() {  console.log("Init: 2");});

上帝保佑，看运行结果我们看到了如下的信息：

Init: 1Error: DOES_NOT_EXIST is not definedInit: 2

赞！这就是我们期望的。这两个回调都运行而且互不影响，并且还能获得异常的信息，太好了！

好了，我们回过头来扶起 Internet Explorer 这个“阿斗”（我已经听见场下观众的建议了）。Internet Explorer 不支持 W3C 的标准事件规范，谢天谢地好在它有自身的实现 -- 有个 fireEvents 的方法，但只能在用户事件的时候触发（例如用户点击 click）。

不过终于找到了门道，我们来看下具体代码：

var currentHandler;if (document.addEventListener) {    // 省略上述的代码} else if (document.attachEvent) { // MSIE    // 利用扩展属性，当此对象被改变时触发    document.documentElement.fakeEvents = 0;    document.documentElement.attachEvent("onpropertychange", function(event) {        if (event.propertyName == "fakeEvents") {            // 执行回调            currentHandler();        }    });    dispatchFakeEvent = function(handler) {        // 触发 propertychange 事件        document.documentElement.fakeEvents++;    };}

简而言之，殊途同归，只是针对 Internet Explorer 使用了 propertychange 事件作为触发器。