Raise and handle an event in javascript

Using events in javascript

The idea of hooking up an event is to tell the browser that when a certain event occurs, it should call a specified function.

The function assigned to an event is said to be an event listener listening for that event. The need, then, is to assign a function to an event to listen for when that event occurs.

You can hook up an event in three ways:

  • Declare it directly in the HTML markup.
  • Assign the function to the event property of the element object through JavaScript.
  • Use the newer add and remove methods on the element object to associate event handlers.

When assigning event handlers through JavaScript, you have two choices: provide a named function and assign an anonymous function.

Event Objects

The event object is a common object available within event handlers that provides metadata about the event.

The event object is accessed within an event handler function, using the window object as shown in the following code: 

<!-- EVENT OBJECT -->
<script type="text/javascript">
    var eventObject = function () {
        var evnt = window.event;
    }
</script>

The event object is a property of the window object. In some browsers, the event object is passed to the event function as a parameter.

Declarative event handling

Handling events declaratively in the HTML markup is possible by setting up an event handlers line within the HTML elements. This is effectively no different than assigning a value to any other property or attribute of the HTML element.

The following code demonstrates this:

<body onload="onloadHandler()">
<!-- Declarative event handling -->
<script type="text/javascript">
    function onloadHandler() {
        alert("hello declarative event.");
    }
</script>
</body>

Assignment event handling

Assigning the event function to the event property through JavaScript is another way to set up event handlers. This method has been around for a long time and is still widely used.

The following code demonstrates this:

<body onload="onloadHandler()">
<!-- Assignment event handling -->
<script type="text/javascript">
    window.onload = onloadHandler();
    function onloadHandler() {
        alert("hello assigment event.");
    }
</script>
</body>

Using the addEventListener and removeEventListener methods

The addEventListener and removeEventListener are the two preferred methods to hook up a function to an event and then to remove it later as needed.

The addEventListener and removeEventListener methods accept two required parameters and one optional parameter:

  • The event name is the name of the event to be handled.
  • The event function that should run when the event occurs, the listener.
  • The optional cascade rule provides some flexibility in how the events move through nested DOM elements.

The following code demonstrates the two methods to add and remove events:

<body>
<button id="button1">ADD EVENT</button><br />
<button id="button-cancel">REMOVE EVENT</button><br />
<div id="#div1"> </div>
<!-- ADD EVENT -->
<script type="text/javascript">
    document.getElementById("button1").addEventListener("click", onloadHandler, false);
    function onloadHandler() {
        document.getElementById("#div1").innerText = "Hello Event 3";
    }
</script>
<!-- REMOVE EVENT -->
<script type="text/javascript">
    document.getElementById("button-cancel").removeEventListener("click", remove, false);
    function remove() {
        alert("REMOVED EVENT");
    }
</script>
</body>

Using anonymous functions

An anonymous function has no name and can’t be called from other code segments.

The anonymous function event listener assigns a function object to the onload property of the window object, which in turn handles the event when the window is completely loaded.

In the following code the anonymous function assigns and removes an event:

<body>
<button id="button1">ADD EVENT</button><br />
<button id="button2">REMOVE EVENT</button><br />
<!-- ADD EVENT FROM ANONYMOUS FUNCTION -->
<script type="text/javascript">
    window.addEventListener("load",
    function () {
    document.getElementById("button1").addEventListener("click", onloadHandler, false);
    },
    false);
    function onloadHandler() {
            alert("add event from anonymous.");
    }
</script>
<!-- REMOVE EVENT FROM ANONYMOUS FUNCTION -->
<script type="text/javascript">
    window.removeEventListener("load",
    function () {
    document.getElementById("outer").addEventListener("click", onloadHandler, false);
    },
    false);
    function onloadHandler() {
        alert("remove event from anonymous.");
    }
</script>
</body>

Cancel an event in javascript

The ability to cancel event processing can be useful when you want to completely override the implementation of the native functionality of a DOM element.

A perfect example is if it was required to override the inherent functionality of an anchor element.

An event listener would be set up for the click event. Then in the click event, via the event object, the function itself can return false. This tells the runtime to stop any further processing of the event.

The following code demonstrates this:

<body>
<button id="button1">CANCELING EVENT</button><br />
<!-- CANCELING EVENT  -->
<script type="text/javascript">
    window.onload = function () {
        var a = document.getElementById("button1");
        a.onclick = OverrideAnchorClick;
    }
    function OverrideAnchorClick() {
        //do custom logic for the anchor
        window.event.returnValue = false;
        //or
        //return false;
    }
</script>
</body>

Ads Right