How to extend onchange event using JavaScript

Question

This is the question I came up with about the extension on the JavaScript element onchange event. I have several selection elements that will conditionally have one onchange event attached to each of them (when they change to certain values, it hides / hides certain elements). I want to conditionally add or add to another onchange event so that they set a global variable if they change without changing or disabling the previous function already attached to them. Is there a way to “add” an additional function or add more functionality to an existing one?

Here is what I consider an example:

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

Alternatively, I would just add a 1-foot "set global variable to false" to the original function.

Answer 1

You can cheat simply by having a compound function that calls other functions.

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

You can also use the observer pattern described in Pro Design Design Patterns . I have an example of its use in an article ( 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

You want to see the addEventListener() and attachEvent() functions (for Mozilla and IE browsers, 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, so when an event occurs, several functions can be called.

Answer 3

Can you use jQuery? This will allow you to easily bind / manipulate / unleash events. The only device - event handlers are activated in the order in which they are bound.

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

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

Answer 4

If you use jquery, you 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 }); } 

Basically this will ensure browser compatibility.

Answer 5

Take a look at addEventListener - https://developer.mozilla.org/en/DOM/element.addEventListener

Answer 6

There are currently three different methods for determining event handlers (a function that runs when a specific event is detected): the traditional method, the W3C method, and the Microsoft method.

Traditional method

In the traditional method, event handlers are determined by setting the onevent property of the element in Javascript (as you do in your sample code) or setting the onevent attribute in the HTML tag (for example, <select onchange="..."> ), although this is the easiest way to use , its use, as a rule, is frowned now because, as you have discovered, it is rather tough - it is not easy to add and remove event handlers to an element to which an event handler is already connected. Also, it is no longer considered good practice to mix javascript with HTML, but it must be contained within or loaded via the <script> .

W3C / Microsoft Methods

The World Wide Web Consortium (W3C) and Microsoft are defining their own event models. Both models work differently, but use different syntaxes. The Microsoft model is used in Internet Explorer, and the W3C model is used in other browsers (Firefox, Opera, Safari, Chrome, etc.). Both of these models have functions for adding event handlers (addEventListener for W3C, attachEvent for Microsoft) and removing event handlers (removeEventListener / detachEvent). This allows you to dynamically add and remove specific handlers for an element; in your case, you can add the first handler based on the first condition, and the second - on the second condition. The “problem” with these methods is that there are two of them, and therefore both methods should be used to ensure that your event handler is registered in all browsers (there are also a few subtle differences between the two models, but these differences are not important for the scope application of this issue). In fact, if you look, you will find a large number of "addEvent" functions that use both methods if necessary (and usually return to the traditional method for older browsers). For example, the contest was launched on the QuirksMode blog back in 2005 to create the best "addEvent" function, the result of which (along with the winning function) you can see.

Also, if you use a javascript library like Prototype or jQuery, they have built-in event handling functions that will take care of you above.

Answer 7

It seems to me that I can miss something important about your question, but will this simpler solution not work for you?

Just check the conditions inside the onChange event and do the necessary actions. This would be much simpler than dynamically adding / removing eventListeners

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