Science Library - free educational site

Event handlers

Personalised Events in JavaScript

Often it is useful to augment the available events by creating personalised events. The simplest method is as follows:

var event = new CustomEvent('eventName');

//Listen to an element:

elem.addEventListener('eventName', function(e){...});

// Trigger

event.dispatchEvent(event);

This method functions on all up-to-date browsers - except Internet Explorer. To make it functionable with antiquated browsers and IE, we can use an alternative method:

function createEvent(eventType) {

try {

return new CustomEvent(eventType);

} catch (error) { // CustomEvent not supported

if (document.createEvent && document.createEvent.initEvent) {

// old browsers

var ev = document.createEvent("HTMLEvents");

ev.initEvent(eventType, true, true);

} else if (document.createEventObject) {

// IE

var ev = document.createEventObject();

ev.eventType = eventType;

} else {

return false;

}

return ev.

}

}

At this point, however, it is necessary to bear in mind that the events created with createEventObject do not have the dispatchEvent method, but use instead fireEvent.

function triggerEvent(element, event) {

if (element.dispatchEvent) {{

element.dispatchEvent(event);

} else if (element.fireEvent) {

element.fireEvent("on" + event.eventType, event);

} else {

return false;

}

return true

}

In this way we can create and use our own personalised events!

Sean Bone

ZumGuy Network webmaster

Visit my Internet forum: ZumGuy Internet Forum

Per una versione di quest'articolo in Italiano vedi: Eventi personalizzati in JavaScript

Personalised Events in JavaScript

Often it is useful to augment the available events by creating personalised events. The simplest method is as follows:

var event = new CustomEvent('eventName');

//Listen to an element:

elem.addEventListener('eventName', function(e){...});

// Trigger

event.dispatchEvent(event);

This method functions on all up-to-date browsers - except Internet Explorer. To make it functionable with antiquated browsers and IE, we can use an alternative method:

function createEvent(eventType) {

try {

return new CustomEvent(eventType);

} catch (error) { // CustomEvent not supported

if (document.createEvent && document.createEvent.initEvent) {

// old browsers

var ev = document.createEvent("HTMLEvents");

ev.initEvent(eventType, true, true);

} else if (document.createEventObject) {

// IE

var ev = document.createEventObject();

ev.eventType = eventType;

} else {

return false;

}

return ev.

}

}

At this point, however, it is necessary to bear in mind that the events created with createEventObject do not have the dispatchEvent method, but use instead fireEvent.

function triggerEvent(element, event) {

if (element.dispatchEvent) {{

element.dispatchEvent(event);

} else if (element.fireEvent) {

element.fireEvent("on" + event.eventType, event);

} else {

return false;

}

return true

}

In this way we can create and use our own personalised events!

Sean Bone

ZumGuy Network webmaster

Visit my Internet forum: ZumGuy Internet Forum

Per una versione di quest'articolo in Italiano vedi: Eventi personalizzati in JavaScript

Content © Andrew Bone. All rights reserved. Created : June 3, 2014 Last updated :March 7, 2016

Latest Item on Science Library:

The most recent article is:

Fission

View this item in the topic:

Nuclear and Particle Physics

and many more articles in the subject:

Subject of the Week

Universe

'Universe' on ScienceLibrary.info covers astronomy, cosmology, and space exploration. Learn Science with ScienceLibrary.info.

Science

Great Scientists

William Herschel

1738 - 1822

William Herschel is one of the most famous of all astronomers, best remembered for his discovery of Uranus in 1781.

William Herschel
Lugano English

Quote of the day...

Do unto future generations as we hope previous generations did unto us.

ZumGuy Internet Promotions

English language school