One event handler provoking another

Clarence Gardner · Jul 20, 2004

I'm seeing surprising behavior, consistent across Opera, Firefox, and IE.
An event handler is changing the value of an element, and there is apparently
no Change event being generated for the element. A simple illustration is,
make an INPUT element with an onchange; type in a new value, the Change
event handler is called. But make a button whose Click handler changes the
value, and the Change handler does not get called.

It appears that events are not generated while an event handler is running.
Can this be true?

Stephen Chalmers · Jul 21, 2004

Clarence Gardner said:
I'm seeing surprising behavior, consistent across Opera, Firefox, and IE.
An event handler is changing the value of an element, and there is apparently
no Change event being generated for the element. A simple illustration is,
make an INPUT element with an onchange; type in a new value, the Change
event handler is called. But make a button whose Click handler changes the
value, and the Change handler does not get called.

It appears that events are not generated while an event handler is running.
Can this be true?

Under Mozilla, I achieved the desired effect by having the button first
focus the field to be changed,
then setting the new value, then changing the focus to another field.
It appears in this case to depend upon the browser's exact criteria for
triggering an onchange.
I.E. & Opera appear to insist upon the keyboard being involved, so you may
have to invent another
method to achieve what you want.

<HTML>
<BODY>


<FORM>
<INPUT value='0' type=text size=80 onchange='dfe[1].value+=" Top field
added me" '><- Change my
value, then blur me.<BR>

<INPUT type=text size=80 value=''><BR>

<INPUT type=button value="Change value of top field"
onmouseup='dfe[0].focus();dfe[0].value+=" Button

did this";dfe[0].blur()'><BR>

<INPUT type=reset value='Clear this mess'>
</FORM>

<SCRIPT>
var dfe=document.forms[0].elements;
</SCRIPT>

</BODY>
</HTML>

Grant Wagner · Jul 21, 2004

Clarence said:
It appears that events are not generated while an event handler is running.
Can this be true?

It has nothing to do with whether the event handler is running or not.

Javascript may or may not fire events for things that happen programmatically.
Changing the value of an input programmatically does not trigger the onchange
event, issuing document.forms['formName'].submit() does not fire the onsubmit
event of the form (the exception being some versions of Opera, which _did_
incorrectly fire the onsubmit event of the form when calling it's submit()
method).

However, calling the click() method of a button causes that button's onclick
event to fire, and calling the focus() and blur() methods on an element both
cause the onfocus and onblur events to fire respectively.

Anyway, if you want to process the onchange event of an input after changing it's
value programmatically, the correct way to do it is as follows:

<script type="text/javascript">
function test(f) {
var theElement = f.elements['myInput'];
if (theElement) {
theElement.value = 123;
if (theElement.onchange) {
theElement.onchange();
}
}
}
</script>
<form name="myForm">
<input type="text" name="myInput" value="456"
onchange="alert('myInput=' + (+this.value +1));">
<input type="button" name="myButton" value="Test" onclick="test(this.form);">
</form>

Calling the onclick() method programmatically after changing the value
programmatically will have a much better chance of success then flipping the
focus around in an attempt to make the user agent trigger the event itself.

Of course, if you're already _in_ the onchange event when you do this, it would
be a good idea to include some way of preventing an endless loop, where the
onchange event changes the value, then calls the onchange event, which calls the
onchange event, etc.

Clarence Gardner · Jul 28, 2004

Thanks, folks. Those were very good and helpful answers.

Before I saw them, I ended up changing the field from a regular text-type
to a radio button, and calling its click() method; I put the same code from
the text's onchange into the button's onclick.

Your answers made me realize why it didn't work in the first place, relating
to the standard's wording (paraphrased) that that onchange event is fired when
an element loses focus and its value is not the same as it was when it gained
the focus. I ASSUMED

Believe it or not, all I was actually trying to do was to get some code to
run in another window. I have window A loading a document into iframe B,
and A wants a function to run after B has loaded. It got convoluted because
of various things not working, (I don't remember the details). I wanted to
just call the function from the onload handler in B's document, but it's
apparently impossible to address a JavaScript function that way. (Even though
I regularly do so from one frame calling into another.) So I figured, if I
can't get to the function, I can get to an element over there that *can* get
to the function. Whew! Roundabout, but it works.

Thanks again for the great responses.

native code attached to onblur/onfocus event handler	2	Nov 19, 2008
Event handler in c++	14	Jan 22, 2012
global event handler	1	May 31, 2007
Event Handler Question	4	Apr 12, 2007
Event context	2	Jul 1, 2009
How can I hide a div using an event listener on multiple checkboxes?	6	Dec 23, 2022
Cross browsers form select element event handler	3	Feb 4, 2007
Event Handler in Object Works in IE not Firefox	5	Oct 4, 2007

One event handler provoking another

Clarence Gardner

Stephen Chalmers

Grant Wagner

Clarence Gardner

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads