Over a million developers have joined DZone.

How JQuery Changed Events...

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Event handling helps to enrich any application and that most definitely includes web applications. Do this when the button is clicked! Do this when the page has finished loading! Client side JavaScript has a range of event handling options. Before the days of funky JavaScript libraries such as JQuery, when the web was in its embryonic stage, event handling was achieved purely in JavaScript. One technique was to set the event handling properties to some JavaScript code. For example:

...
<button id="mybutton">Click Me</button>
<script>
var button = document.getElementByid("myButton");
button.onclick = function() {
   alert("You clicked me!");
}
</script>

ere the onclick event property is set so that the an alert message is shown when the button is clicked. The Window object, Document node and the various Element objects all have a selection of event properties. Some of the more interesting ones are:

  • window.unload - triggered when user is navigating away from from a document.
  • form.onchange - can be used to capture a change from any element in the form thru a technique known as bubbling.
  • element.onload - every document element (e.g. , All seemed much nicer, but IE complicated things:
    1. IE8 did not support addEventListener(). Instead you had to use attachEvent()
    2. Event handlers usually receive an Event object (http://www.w3schools.com/jsref/dom_obj_event.asp) which contains details of the event. This will contain properties such as the element that trigged the event, the name of the event and the time it was created etc. To receive this event simply add it to the event handler.
      button.addEventListener("click", function(event) {
          alert("You clicked me with an event of type!" + event.type)}, false);
      But you guessed it, IE8 did not support this mechanism to get details of the event and instead, you had to check the global variable window.event to get information about it. This lead to messy JavaScript code such as
      function handler(event) {
          event = event || window.event;  // got to cater for Microsoft!
      }
    3. The "this" keyword in the event handling code usually referred to the document element that fired the event. However in IE8's attachEvent(), the this referred to the global window.

  JQuery comes to the rescue providing APIs that work in all browsers. The commonly used events (e.g click, load) have their own event registration APIs (click(), load()). Similar to JavaScript's addEventListener() the JQuery event handler APIs allow multiple event handling logic to be associated with the same event. And similar to JavaScript, JQuery event handler functions do not have to have arguments or return values but both are supported. The value add being that JQuery APIs work and all browsers - that means event objects are passed into event handlers for poor old IE8!

//add to all button elements
$("button").click(function() {alert("You clicked me");}); .

So JQuery clearly solves some problems here. Does it offer anything else? Of course... the bind() API. This allows:

  • the same handler to be executed for multiple events. Just separate the events by a space. 
    // invoke myEventHanlder for any click, mousedown events for any div elements.
    $('div').bind('click mousedown', myEventHandler);  
  • the same handler function to be reused with different data. This is achieved by passing an Object literal as the second object in the bind API. The object literal values can then be read in the event handler via the event objects data properties.
    // call buttonClicked and pass color red to it.
    jQuery('#button1').bind('click', {team:'Leinster'}, buttonClicked);
    // call the same buttonClicked function but pass blue.
    jQuery('#button2').bind('click', {team:'Munster'}, buttonClicked); 
    buttonClicked function could then be something like:
    function buttonClicked(event) {
        alert("you selected team" + event.data.team);
    }
  • Refer to multipe event handlers at the same time. This is achieved in JQuery by using namespaces for the events. Suppose you want to group a selection of events. You could put them all into the same namespace click.myclickevents.
    $("#myButton1").bind('click.myclickevents', myfunction());
    $("#myButton1").bind('mousedown.myclickevents', myfunction());
    Because they are grouped they can be referred to now at the same time. This comes in handy if you want to remove them.
    $("#myButton1").unbind('myclickevents');

In addition JQuery provides:

  • The one() API. This is similar to bind, except the eventhandlers only get called once. They are then deregistered.
  • The trigger() API. This provides the ability to manually cause event handlers (including custom events) to be invoked.
  • Live events This is like the event handling achieved with the bind() except it will also add event handling logic to new elements that are to still to be created, whereas bind() only adds it to existing elements.


 

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Published at DZone with permission of Alex Staveley, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}