6

这是我在扩展元素的 JavaScript onchange 事件时遇到的一个问题。我有几个选择元素，它们有条件地将一个 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“将全局变量设置为 false”添加到原始函数中。

4

7 回答 7

9

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

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

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

//– 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; 
};
于 2009-06-03T18:27:45.147 回答
4

You want to look at the addEventListener() and attachEvent() functions (for Mozilla-based browsers and IE respectively).

Take a look at the docs for addEventListener() and 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);
}

You can add multiple listeners to each element, therefore more than one function can be called when the event fires.

于 2009-06-03T18:35:03.620 回答
2

Can you use jQuery? This will allow you to bind/manipulate/unbind events pretty easily. The only hitch is event handlers are activated in the order they are bound.

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

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

And, you can also look into triggering custom events, if your needs are complex. For example, instead of "interpreting" onChange, maybe there is a way to specifically trigger custom events. See the last example on jQuery's page.

于 2009-06-03T18:36:48.390 回答
2

If you use jQUery you would have something like

<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
    });
}

This will mostly take care of browser compatibility as well.

于 2009-06-03T18:43:41.730 回答
1

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

传统方法

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

W3C/微软方法

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

同样，如果您使用诸如 Prototype 或 jQuery 之类的 javascript 库，它们会附带内置的事件处理函数，这些函数将为您处理上述问题。

于 2009-06-03T18:58:53.680 回答
1

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

于 2009-06-03T18:27:55.863 回答
1

我觉得好像我可能遗漏了关于您的问题的一些重要信息，但是这种更简单的解决方案对您不起作用吗？

只需检查onChange 事件内部的条件并根据需要执行操作。这比必须动态重新添加/删除 eventListeners 容易得多

document.getElementById("selectbox1").onchange = function () { 
    if (<certain conditions>) {       
     //hides elements to reduce clutter on a web form ...
    }
    if (<other conditions>) { ... }
}
于 2015-07-02T00:42:08.047 回答