Hosting Solutions
mobile_logo Table of Contents

Event Handling

Adding event listeners brings our documents to life and makes them interactive.

Event handling consists of the following steps: 1. Target an element in the document(or object in the script). 2. Specify an event related to that type of object. 3. Write a function to handle the event when it happens.

Some objects have events that are specific to them. For instance a multimedia object like audio or video can be given the "ended" event listener to allow a script author to run some specific code when media playback ends.

addEventListener method

The addEventListener() method is the recommended approach for establishing event handling in all modern web applications.

<button id="btn1">Button 1</button> btn1.addEventListener("click", function(event){ alert("You clicked "; }); <!DOCTYPE html> <html> <head> <script> // Establish any variables the script will reference var btn1, btn2; function addEvents(){ // Get object references for any elements that your script will control btn1 = document.getElementById("btn1"); btn2 = document.getElementById("btn2"); // Add all event listeners that your application needs btn1.addEventListener("click", clickHandler); btn2.addEventListener("click", clickHandler); } function clickHandler(event){ alert("You clicked "; } // Make addEvents() function run after document finishes loading window.addEventListener("load", addEvents); </script> </head> <body> <button id="btn1">Button 1</button> <button id="btn2">Button 2</button> </body> </html>

In the example above we initialize the application by adding a 'load' event listener to the window object that makes sure all elements in the document are loaded before we script against them. Then we simply add event listeners to all of the elements and objects in our application that need them. This keeps our HTML slim and uncluttered by completely separating script handling from our HTML markup.

event listening in object event properties

Another approach is to use event properties, however adddEventListener() method replaces this approach for modern web applications.

btn1.onclick = function(event){ alert("You clicked "; };

event listening in HTML event attributes

We can add event handling directly to html elements in the document as attributes. Whenever possible it is recommended to start using the adddEventListener() method instead to separate script handling from html markup.

<script> function clickHandler(event){ alert("You clicked "; } </script> <button onclick="clickHandler(event)" id="btn1">Button 1</button> <button onclick="clickHandler(event)" id="btn2">Button 2</button>

HTML Element Events

The following event handler attributes can be applied to all HTML elements where applicable.

abort - onabort blur - onblur cancel - oncancel canplay - oncanplay canplaythrough - oncanplaythrough change - onchange click - onclick cuechange - oncuechange dblclick - ondblclick durationchange - ondurationchange emptied - onemptied ended - onended error - onerror focus - onfocus input - oninput invalid - oninvalid keydown - onkeydown keypress - onkeypress keyup - onkeyup load - onload loadeddata - onloadeddata loadedmetadata - onloadedmetadata loadstart - onloadstart mousedown - onmousedown mouseenter - onmouseenter mouseleave - onmouseleave mousemove - onmousemove mouseout - onmouseout mouseover - onmouseover mouseup - onmouseup mousewheel - onmousewheel pause - onpause play - onplay playing - onplaying progress - onprogress ratechange - onratechange reset - onreset resize - onresize scroll - onscroll seeked - onseeked seeking - onseeking select - onselect show - onshow stalled - onstalled submit - onsubmit suspend - onsuspend timeupdate - ontimeupdate toggle - ontoggle volumechange - onvolumechange waiting - onwaiting



IntroductionImplementationFallback ContentDevelopment OutputSyntax GuidelinesVariablesFunctionsStatementsOperatorsEvent HandlingObjects