javascript - 如何在多个函数之间解除一个函数与一个事件的绑定(bind)？

Question

例如，我们不知道有多少函数已经绑定(bind)到一个事件。在这种情况下，我们可以像下面这样绑定(bind)我们自己的函数

var old = (element.onclick) ? element.onclick : function () {};
element.onclick = function () {old(); myOwn()};

现在如何单独解绑自己的功能而不打扰其他人？

Answer 1

将多个事件附加到 DOM 元素时，不应更改“onfoo”属性。相反，请使用 addEventListener("foo")(或 IE 中的 attachEvent("foo"))。同样，您可以使用 removeEventListener(IE 中的 detachEvent)来删除事件。

var myEventHandler = function (e) {
  alert("do stuff");
}

var myDomElement = document.getElementById("my_id");

myDomElement.addEventListener("click", myEventHandler, true);
myDomElement.attachEvent("click", myEventHandler); // IE

myDomElement.removeEventListener("click", myEventHandler, true);
myDomElement.detachEvent("click", myEventHandler); // IE

将“onfoo”替换为“foo”。因此，当您执行 element.onmouseup 时，您应该执行 element.addEventListener("mouseup", ...)。

必须使用函数引用，因为函数的内部对象 ID 用于引用，而不是其内容。这是行不通的:

myDomElement.addEventListener("click", function () { alert("foo") }, true)
myDomElement.removeEventListener("click", function () { alert("foo") }, true)

您可以创建一个简单的包装器来实现跨浏览器兼容性。

var addEventListener = function (element, event, func) {
  if (element.addEventListener) {
    element.addEventListener(event, func, true);
  } else {
    element.attachEvent(event, func);
  }
}