将多个JavaScript函数添加到同一个输入框的“onchange”事件中。

Question

我想在JavaScript中为同一个输入框添加多个onchange函数。 类似于以下代码：

this.el = document.getElementById(this.docID);

if(x==y)
{

 this.el.onchange += function(){ // some code }

}
if(a==b)
{

 this.el.onchange += function(){  // some code }

}

- user368038

Answer 1

如果您想链接多个onchange函数，可以像这样操作：

this.el = document.getElementById(this.docID);

if(x==y) {
  this.el.onchange = function(){ // some code }
}

if(a==b) {
  var oldOnChange = this.el.onchange;
  this.el.onchange = function(){ 
    // execute previous onchange function
    if(oldOnChange) oldOnChange();

    // some code 
  }
}

你可以像这样决定是否要在新的onchange代码之前或之后执行旧的onchange函数。

- Janick Bernet

---

我人生中第一次感觉到松耦合的语言也有一些好处。 :D 顺便说一句，这是个玩笑。它们在其他方面也非常有用。比如你可以使用变量来保存一个方法。 - soham

Answer 2

不要使用onchange属性，你应该考虑使用addEventListener和其他DOM2方法。即使使用onchange属性，也会出现一些跨浏览器问题，因此我的建议是使用库，例如jQuery change事件观察器。

使用jQuery，你的代码示例将如下所示：

this.el = document.getElementById(this.docID);

if(x==y) {
    $(this.el).change(function() { /* some code */ });
}
if(a==b) {
    $(this.el).change(function() { /* some code */ });
}

- Douglas

---

我无法使用jQuery，因为$()函数名称冲突。 - user368038

DOM Level 2事件是为了这个用例而创建的。 - hurrymaplelad

Answer 3

你不能将两个函数相加，那段代码是错误的。只有一个 onchange 函数。

所以你可以像这样做：

this.el.onchange = function() {   
    if(x==y) {
        // some code
    } else if(a==b) {
        // some other code  
    }  
}

- Luca Matteis

---

我无法做到这些，因为这些代码背后有复杂的业务逻辑。 - user368038

我可以从 HTML 中调用函数：我想要在 JavaScript 中实现这些。 - user368038

Answer 4

this.el.onchange 在调用主函数后，进行比较并调用其他函数

this.el = document.getElementById(this.docID);

this.el.onchange += functionx();

functionx() {

if(x==y) {

this.el.onchange += functionY(){ // some code }

} if(a==b) {

this.el.onchange += functionZ(){ // some code }
}

}

- onurbaysan

---

onchange 变成了一个函数，它不再是一个字符串。因此在这一点上它不支持串联。 - Fabien Ménager