Javascript - Events

This really sucks - code that works perfectly in Chrome fails in Firefox!!!

Basically, in Chrome and IE, the event object is global and can be referenced in an event handler (a method called when an event is triggered) without it being explicitly included as a parameter.

However, with Firefox, the event object must be explicitly passed as a formal (defined) parameter.

Overview | html tags | Using code | event.target fix | Matrix | Notes


Overview

An event (a user action or system trigger) has several parts. When the user performs some action - pressing a key, clicking the mouse, ... - an event object is created describing the current system state. Next, the browser checks to see if an event handler is associated with that action and, if defined, calls it.

In IE and Chrome, the event object is global and available to the event handler whether it is defined as a formal parameter or not.

In Firefox 49, the event object is NOT global and must be explicitly passed - meaning that it must be explicitly added to the function definition. Depending on the method used to associate the event with a handler, the key word event either must be explicitly specified or it may be omitted.

In all browsers (that I tested), the key word event must be included when specifying an event handler via an html tag. (See details below.)

This page has code showing most of the possible combinations of implicit and explicit use of the event object and how to register the handlers - just look at the source.


html tags

Creating an event handler is fairly straight forward, and well documented (sort of). In an html tag, you use something similar to However, if you need the event object, then Firefox requires that that identifier be included as a parameter. If the only reason the event object is needed is to get event.target, you can use Note: event.target does not exist in IE8, you must use event.srcElement instead. Also, I have not tested the keyword this in IE8.


Using code

The same general rules apply when attaching event handlers via javascript code, with a few caveats Based on actual tests (see the next section), the following is the "best" way to define event handlers in code Where the func_abc event handler is defined similar to It is also possible to define inline functions (no name) Note that in all cases where the word function is used, the formal (specified) parameter must be defined with the identifier event. If the parameter is missing, then the event object will still be available in Chrome, IE, and Edge - but will be undefined in Firefox!

This function handles the fact that there are 2 separate "standards" - IE and Chrome|Firefox|Edge - to define (associate) event handlers via code.

As shown in the previous section, it is also possible to define event handlers in the html tag via but I suggest using that sparingly since it makes debug and maintenance more difficult.

Of course, if the event object is not needed, you can simply define the calls without any parameters.

By the way, if you want to associate an event handler that does not require an event object, you can use code similar to


event.target fix

Above, I indicated that event.target fails in IE8 - this is the code I actually use. A better design would be because the if-statement would only have to be executed once. Of course, that code should run before window.onload is called.


Matrix

The following table uses the mouseover event to test when the event object is available to the event handler. In some cases, the object is explicitly passed, in others, it is not. Color coding indicates the results I obtained.

To test these, I created 2 functions with the intent of determining if the event object is available or not. The expected responses are I was quite surprised at how often there was no response - meaning that the event was not triggered. This was caused by calling the event with the wrong number of parameters.

An event handler is a function associated with an event. Normally, a function is referred to by just its name - when is is followed by parentheses, then the function is executed and a result is returned. In Chrome, it does not matter if an event is attached to a function or to the "result" of a function, ie. it does not matter is the parentheses are present are not. Chrome simply assumes that you meant to specify the function and not execute it, it mostly ignores stuff that does not make sense and/or "fails gracefully".

However, Firefox aborts execution when an improper assignment is made (parentheses are included) unless the key word function is also included. This is indicated by the large white area in the table. Worded another way - the syntax used in an html tag is different than the syntax used in javascript.

There are a number of additional syntax combinations that work in Chrome that fail in one or more other browsers.

The point of this page was to determine what will work in all 3 browsers. This is it - it uses one method for Firefox and Chrome, and another for older IE versions.

Notice that, as well as the method names, the event names are different (for IE8, they start with "on")


Notes

These are just some of the notes I made before I created the table above. They are just here for reference - all of this should be in the table.

This code fragment works without failure in Chrome but fails with

in Firefox. Same with these 3. This code works in both. And so does this. (This appears to be identical to number 2 of 3 above. Not sure what the difference is.)


Author: Robert Clemenzi
URL: http:// mc-computing.com / Languages / Javascript / Events.html