Question

这是我遇到的关于扩展元素的JavaScript onchange事件的问题。我有几个select元素有条件地将每个onchange事件附加到每个元素上（当它们更改为特定值时，它会隐藏/取消隐藏某些元素）。我想有条件地添加或附加到另一个onchange事件，以便他们设置一个全局变量，如果他们确实更改而不修改或禁用已附加到它们的上一个函数。有没有办法“附加”附加功能或在现有功能上添加更多功能？

以下是我认为的例子：

<select id="selectbox1">
    <option>...</option>
    <option>...</option>
</select>

if (<certain conditions>) {
    document.getElementById("selectbox1").onchange = function () { 
        //hides elements to reduce clutter on a web form ...
    }
}
....
if (<other conditions>) {
    document.getElementById("selectbox1").onchange = function2 () {
        //set global variable to false
    }
}

或者我想简单地将1-liner“set global variable to false”添加到原始函数中。

Answer 1

你可以通过简单地使用一个调用其他函数的复合函数来作弊。

document.getElementById("selectbox1").onchange = function() {
    function1();
    function2();
}

您还可以使用书籍Pro JavaScript Design Patterns中描述的观察者模式。我在一篇文章（here）中有一个例子。

//– publisher class — 
function Publisher() { 
    this.subscribers = []; 
};

Publisher.prototype.deliver = function(data) { 
    this.subscribers.forEach(function(fn) { fn(data); }); 
};

//– subscribe method to all existing objects 
Function.prototype.subscribe = function(publisher) { 
    var that = this; 
    var alreadyExists = publisher.subscribers.some(function(el) { 
        if (el === that) { 
            return; 
        } 
    });

    if (!alreadyExists) { 
        publisher.subscribers.push(this); 
    } 
    return this; 
};

Answer 2

您想查看addEventListener()和attachEvent()函数（分别针对基于Mozilla的浏览器和IE）。

查看addEventListener()和attachEvent()的文档。

var el = document.getElementById("selectbox1");

try { //For IE
    el.attachEvent("onchange", function(){ code here.. });
}
catch(e) { //For FF, Opera, Safari etc
    el.addEventListener("change", function(){ code here.. }, false);
}

您可以为每个元素添加多个侦听器，因此在事件触发时可以调用多个函数。

Answer 3

你能用jQuery吗？这将允许您非常轻松地绑定/操作/取消绑定事件。唯一的障碍是事件处理程序按它们绑定的顺序激活。

if (<certain conditions>) {
   $("#selectbox1").bind("change", eventdata, function1);
}

if (<other conditions>) {
   $("#selectbox1").bind("change", eventdata, function1);
}

而且，如果您的需求很复杂，您还可以考虑触发自定义事件。例如，可能有一种方法可以专门触发自定义事件，而不是“解释”onChange。请参阅jQuery页面上的last example。

Answer 4

如果你使用jquery，你会有像

这样的东西

<select id="selectbox1">
    <option>...</option>
    <option>...</option>
</select>

if (<certain conditions>) {
    $("#selectbox1").change(function () { 
        //hides elements to reduce clutter on a web form ...
    });
}
....
if (<other conditions>) {
    $("#selectbox1").change(function () { 
        //set global variable to false
    });
}

这也将主要考虑浏览器的兼容性。

Answer 5

查看addEventListener - https://developer.mozilla.org/en/DOM/element.addEventListener

Answer 6

目前有三种不同的方法可用于定义事件处理程序（检测到某个事件时触发的函数）：传统方法，W3C方法和Microsoft方法。

传统方法

在传统方法中，事件处理程序是通过在Javascript中设置元素的on event 属性来定义的（正如您在示例代码中所做的那样），或者通过设置on 事件来定义HTML标记中的属性（例如<select onchange="...">）。虽然这是最简单的使用方法，但它的使用现在通常不受欢迎，因为正如您所发现的那样，它是相当严格的 - 向已经附加了事件处理程序的元素添加和删除事件处理程序并不容易。同样，将javascript与HTML混合使用不再被认为是正确的做法，而是应该将其包含在<script>标记内或通过{{1}}标记加载。

W3C / Microsoft方法

W3C（万维网联盟）和微软都定义了自己的事件模型。这两个模型的工作方式基本相同，但使用不同的语法。 Microsoft模型用于Internet Explorer，W3C模型用于其他浏览器（Firefox，Opera，Safari，Chrome等）。在这两个模型中，都提供了添加事件处理程序的函数（用于W3C的addEventListener，用于Microsoft的attachEvent）和删除事件处理程序（removeEventListener / detachEvent）。这允许您动态添加和删除元素的特定处理程序;在您的情况下，您可以根据第一个条件添加第一个处理程序，根据第二个条件添加第二个处理程序。这些方法的“问题”是它们中有两个，因此需要使用这两种方法以确保您的事件处理程序将在所有浏览器中注册（两个模型之间也存在一些细微差别，但这些差异对于这个问题的范围并不重要）。事实上，如果你看，你会发现大量的“addEvent”函数，它们在必要时使用这两种方法（通常可以回溯到旧浏览器的传统方法）。例如，在2005年的QuirksMode博客上运行了一场比赛，以构建最佳的“addEvent”函数，其结果（连同获胜函数）可以看到here。

同样，如果您使用诸如Prototype或jQuery之类的javascript库，它们会带有内置的事件处理函数，可以为您处理上述事宜。

Answer 7

我觉得我可能会遗漏一些关于你问题的重要信息，但这个更简单的解决方案对你不起作用吗？

只需检查onChange事件的条件，然后根据需要执行操作。比动态重新添加/删除eventListeners

更容易

document.getElementById("selectbox1").onchange = function () { 
    if (<certain conditions>) {       
     //hides elements to reduce clutter on a web form ...
    }
    if (<other conditions>) { ... }
}

如何使用JavaScript扩展onchange事件

7 个答案: