在JavaScript中将属性附加到冒泡事件对象

Question

在Chrome/Firefox中，我可以在一个处理程序中将我的自定义属性附加到事件对象上，并在同一事件的不同处理程序中读取它们，即使事件处理是冒泡的。

但是在IE中我无法做到这一点。当事件冒泡时，我的自定义属性会丢失。您知道是否有任何解决方案或变通方法吗？

以下是该问题的示例：

<div id="div1">
<input type="button" value="Foo" id="button1">
</div>

<script>

function attach(el, event, fn) {
  if (el.addEventListener) {
    el.addEventListener(event, fn);
  } else if (el.attachEvent) {
    el.attachEvent('on'+event, fn);
  }

}

attach(document.getElementById("button1"), 'click', function (event) {
event.abc = "done";
return true;
});

attach(document.getElementById("div1"), 'click', function (event) {
alert(event.abc);
return true;
});

</script>

- mgamer

---

你甚至没有在IE中访问event对象。IE不会将它传递给事件处理程序，它只能通过window.event获得。首先尝试这个。 - Felix Kling

@Felix 我试过 window.event，但没有效果。我相当确定事件对象被传递给了事件处理程序。 - mgamer

我使用的是IE8，事件处理程序肯定会传递一个事件对象。 - mgamer

冒着听起来像个粉丝的风险说：这就是为什么使用jQuery（或类似的东西）的程序员永远不会回头 - 因为它为您处理了所有这些丑陋的浏览器不兼容性。 - Blazemonger

@mgamer请查看Microsoft文档-该函数不会传递事件对象。符号“event”是window对象上的属性名称。 - Pointy

在我的例子中，用“e”符号替换“event”，然后自己尝试一下。 - mgamer

Answer 1

根据我的测试，在IE（已测试IE8）中无法向事件对象添加属性。

尝试下面的代码：

attach(document.getElementById("button1"), 'click', function (ev) {
  //ev=ev||event;
  //ev.abc = "done";
  // next lines show you why you cannot save properties in event object
  var xx1=event;
  var xx2=event;
  alert(xx1===xx2); // // showed *false* in IE8, but expected *true*

  return true;
});

我不确定，但可能当请求event对象时，IE8总是返回一个新的对象，其中包含与先前请求的相同的属性/值。

- Andrew D.