Javascript Events

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

An event (a user action or system trigger) has several parts.

The action that triggers the event
The event handler is a function that is called when an event occurs
The event pointer contains the name of (or perhaps, a copy of) the event handler
The event object (named event) contains information that the event handler will use

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

<sometag id="m1" onmouseover="func_abc()">Call handler when the mouse is over this</sometag>

<sometag id="m2" onmouseover="function(){func_abc();}">A lot more text for the same effect</sometag>

However, if you need the event object, then Firefox requires that that identifier be included as a parameter.

<sometag id="m3" onmouseover="func_abc(event)">This handler can use the event object</sometag>

<sometag id="m4" onmouseover="function(event){func_abc(event);}">A lot more text for the same effect</sometag>

If the only reason the event object is needed is to get event.target, you can use

<sometag id="m3" onmouseover="func_abc(this)">This handler gets a reference to this object/tag</sometag>

<sometag id="m4" onmouseover="function(this){func_abc(this);}">A lot more text for the same effect</sometag>

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

Chrome, IE, and Edge don't care if the event object is an actual event handler parameter
Firefox requires that the event object is included as an actual event handler parameter
IE8 uses a different function to add event handlers than that used by the other browsers
In all browsers, the handler is specified without parentheses and parameters unless the word function is used

Based on actual tests (see the next section), the following is the "best" way to define event handlers in code

  mcSetEvent(document.getElementById('s1'), "mouseover", func_abc) ;

Where the func_abc event handler is defined similar to

function func_abc(event){
  var target = event.target; // fails in IE8

  target.value += 1; // or whatever you really want
}

It is also possible to define inline functions (no name)

  mcSetEvent(document.getElementById('sefee'), "mouseover", function(event){func_abc(event);} ) ;

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.

function mcSetEvent(UIElement, event_name, func_1)
{
  if (UIElement.addEventListener) {
      UIElement.addEventListener(event_name, func_1) ; // Chrome, Firefox
  } else {
      UIElement.attachEvent("on"+event_name, func_1) ; // IE
  }
}

This minimized coded performs the same function.

var u = function(t, a, b) {
  t.addEventListener ? t.addEventListener(a, b, !1) : t.attachEvent && t.attachEvent("on" + a, b)
};

As shown in the previous section, it is also possible to define event handlers in the html tag via

<sometag id="mox" onmouseover="func_abc(event)">Call handler when the mouse is over this</sometag>

<sometag id="mox" onmouseover="function(event){func_abc(event);}">A lot more text for the same effect</sometag>

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

document.getElementById('mox').onmouseover = func_xyz ; // function name with no parameters

event.target fix

Above, I indicated that event.target fails in IE8 - this is the code I actually use.

  var target = mcTarget(event);

function mcTarget(event){

  if (document.addEventListener) {
    return event.target;
  }else{
    return event.srcElement; // ie8 sucks
  }
}

A better design would be

var mcTarget ; // create a global variable

if (document.addEventListener) {
  mcTarget = function(event){return event.target;}
} else {
  mcTarget = function(event){return event.srcElement;}
}

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.

Move the mouse over a cell to see the status:

No parentheses/parameters

With parentheses/parameters

function(){xx}

function(event){xx}

onmouseover
in tag

implicit

explicit

implicit()

explicit(event)

Nothing to test here

addEventListener

implicit

explicit

implicit()
Calls the function
Can never work

explicit(event)
Calls the function
Can never work

func(){implicit()}

func(){explicit(event)}

func(event){implicit()}

func(event){explicit(event)}

attachEvent

implicit

explicit

func(){implicit()}

func(){explicit(event)}

func(event){implicit()}

func(event){explicit(event)}

mouseover
in code

implicit

explicit

func(){implicit()}

func(){explicit(event)}

func(event){implicit()}

func(event){explicit(event)}

onmouseover
in code

implicit

explicit

func(){implicit()}

func(){explicit(event)}

func(event){implicit()}

func(event){explicit(event)}

mcSetEvent

implicit

explicit

Nothing to test here

func(event){explicit(event)}

Color key
All 3	Chrome only	~~Firefox only~~	IE8 only	Chrome & Firefox	Chrome & IE8	Aways fails

IE uses onmouseover
Chrome & Firefox use mouseover

To test these, I created 2 functions with the intent of determining if the event object is available or not.

function implicit(){
 response.innerHTML = "This fails!";
 if (event === undefined) return '';
 response.innerHTML = "This works :)";
}

function explicit(event){
 response.innerHTML = "This fails!";
 if (event === undefined) return '';
 response.innerHTML = "This works :)";
}

The expected responses are

"This works :)"
"This fails!"
No text at all

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".

UIElement.addEventListener(event_name, func_1) ;        // This works in all browsers except IE8

UIElement.addEventListener(event_name, func_1()) ;      // This works in Chrome, fails in Firefox
UIElement.addEventListener(event_name, func_1(event)) ; // This works in Chrome, fails in Firefox

UIElement.addEventListener(event_name, function(event){func_1(event)}) ; // This works in all browsers except IE8

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.

  mcSetEvent(UINumber, "mouseup",   mcNumber_ButtonsUp ) ; //This works in all browsers including IE8

function mcSetEvent(UIElement, event_name, func_1)
{
  if (UIElement.addEventListener) {
      UIElement.addEventListener(event_name, func_1) ; // Chrome, Firefox
  } else {
      UIElement.attachEvent("on"+event_name, func_1) ; // IE8
  }
}

function mcNumber_ButtonsUp(event){ // This explicitly includes event 
  var target = mcTarget(event);     // Cross browser method

  // other code here
}

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

IE 8 (Windows XP) is all by its self for attachEvent
Chrome 49 (Windows XP), Chrome 51 (Windows 10), IE 11 (Windows 10), and Microsoft Edge (Windows 10) pass and/or fail the same combinations
Firefox 24 (Windows XP) and Firefox 47 (Windows 10) pass and/or fail the same combinations

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

event not found

in Firefox.

UINumber.addEventListener("mouseout",  function(){ mcNumber_ButtonsUp(); }) ;

function mcNumber_ButtonsUp(){
  var target = event.target;
}

Same with these 3.

UINumber.addEventListener("mouseout",  function(){ mcNumber_ButtonsUp(event); }) ;

function mcNumber_ButtonsUp(event){
  var target = event.target;
}

UINumber.addEventListener("mouseout",  mcNumber_ButtonsUp ) ;

function mcNumber_ButtonsUp(event){ // event object in function definition
  var target = event.target;
}

UINumber.addEventListener("mouseout",  mcNumber_ButtonsUp ) ;

function mcNumber_ButtonsUp(){ // event object NOT in function definition
  var target = event.target;
}

This code works in both.

UINumber.addEventListener("mouseout",  function(event){ mcNumber_ButtonsUp(event); }) ;

function mcNumber_ButtonsUp(event){
  var target = event.target;
}

And so does this. (This appears to be identical to number 2 of 3 above. Not sure what the difference is.)

UINumber.addEventListener("mouseout",  mcNumber_ButtonsUp ) ;

function mcNumber_ButtonsUp(event){
  var target = event.target;
}

Author: Robert Clemenzi