劫持 onchange 事件而不干扰原有功能答案

【问题标题】：Hijacking onchange event without interfering with original function劫持 onchange 事件而不干扰原有功能
【发布时间】：2011-10-12 18:14:36
【问题描述】：

我正在写一个库，我想包含在可能已经使用 onchange 事件的不同页面上 - 有没有办法将我的事件附加到 onchange 而不删除原始事件？

编辑：

窗口对象上的onchange 不仅仅是一个元素 - onchange 就像在 url 中的哈希更改等。抱歉，如果我把它们弄糊涂了！

【问题讨论】：

标签： javascript jquery dom-events onchange

【解决方案1】：

如果我是正确的，听起来您想将新代码注入现有事件。如果您想要一个纯 JavaScript 解决方案，这可能会对您有所帮助，这里有一个演示该功能的小提琴。 http://jsfiddle.net/VZCve/1/

var element = document.getElementById("myElementId");

element.onchange = (function (onchange) {
  return function(evt) {
    // reference to event to pass argument properly
    evt  = evt || event;

    // if an existing event already existed then execute it.
    if (onchange) {
      onchange(evt);
    }

    // new code "injection"
    alert("hello2");
  }
})(element.onchange);

已编辑：现在标签已更改，您在问题中引用了 jQuery

jQuery 将继续使用jQuery.change(). 绑定新函数

注意以下将执行分配的所有更改功能

$(document).ready(function () {
  $("#myElement").change(function() { alert('executed') });
  $("#myElement").change(function() { alert('executed again') });
  $("#myElement").change(function() { alert('executed again again') });
});

当您触发选择器中元素的更改事件时，您将收到 3 个警报。

请注意，事件触发的顺序取决于每个函数绑定到元素的顺序。

这是一个简单的 fiddle 演示 jQuery http://jsfiddle.net/VZCve/ 中的功能

【讨论】：

【解决方案2】：

使用 jQuery 的 .change() 函数分配 onchange 处理程序不会覆盖现有的 onchange 事件（或其他 jQuery 分配的处理程序）。在此处查看工作演示：http://jsfiddle.net/nrabinowitz/EyKdm/

【讨论】：

【解决方案3】：

较新的浏览器有一个 addEventListener 可以做到但 dean.edwards解决方案更好

更兼容旧版浏览器

您还可以使用 costem eventhandeler(s) 来调用函数数组（正确完成后，您可以处理子函数的 return 值来决定是否要运行下一个函数，也可以使用 @987654324 @

if(typeof element.onclickfunctions == "undefined"){
  element.onclickfunctions = [];
}
element.onclickfunctions.push( function(event){return Myfunct(event);});//or var
element.onclick = function(event){
  for(x in element.onclickfuncitons){
    if(! x(event)){
      break;
    }
  }
};

代码未测试，请在否决前发表评论

【讨论】：