[jQuery] Event Handling 2

I explained some simple events in the last post. Now it’s time to talk about more than basics. The “on()” function can be used to hookup an event with its handlers.  The “toggle()” and “hover()” are compound events, which are not mapped to a single JavaScript event.


1. bind()

Rather than adding event handlers directly in the HTML elements, jQuery registers events handlers inside the “$(document).ready()” handler. You can use the on()‘ function to register an event handler to the selected element.

[Note] The “bind()” function is depreciated. Use “on()” instead.

<div id="div1">Click Me</div>

You can add the “click” event handler to the “div” element:

$(document).ready(function () {
  $('#div1').on('click', function () {
    alert('You clicked it.')

In this way, you can create “div” buttons.


2. Accessing “this” in Event Handlers

What does “this” refer to in event handlers? It refers to the element to which the handler is attached. This is useful when you add the same handler to multiple elements. Also you can use “id” attribute of “this” to check the selected element.

<div id="div1">Click Me 1</div>
<div id="div2">Click Me 2</div>

You are adding only one handler to all “div” buttons and find out which button is clicked.

$(document).ready(function () {
  $('div').on('click', function () {
    if (this.id == 'div1')
      alert('The Button 1 is clicked');
    else if (this.id == 'div2')
      alert('The Button 2 is clicked');

[Note] If you use the arrow function as a event handler, “this” will be the enclosing object. If you are using jQuery, you can rely on “e.target” object to get the reference of the element that fires the event.


3. Shorthand Events

The “on()” function is a general way to add an event handler. But jQuery provides shortcut functions for common events.

The “click()” function can be used instead of the “on(‘click’, … )

The most commonly used shortcut event functions are the followings:

  • blur
  • change
  • click / dbclick
  • focus
  • keydown / keyup / keypress
  • loadunload
  • mousedown / mouseup / mouseover / mouseleave / mousemove / mouseout
  • resize
  • scroll


4. Compound Events

jQuery add several custom handlers just for convenience.

  • toggle(): bind two or more handlers to selected elements, to be executed on alternate clicks
  • hover(): bind one or two handlers to the selected elements, to be executed when the mouse cursor enters and leaves the elements


5. toggle()

You can provide two or more handlers to the “toggle()” function. The first click on the element causes the first function to run, the second click executes the second function, and so on. Once all functions are executed, the cycle starts with the first function again.

<div id="div1">Click Me</div>
$(document).ready(function () {
    function () { $('#div1').text('Clicked Once'); },
    function () { $('#div1').text('Clicked Twice'); },
    function () { $('#div1').text('Clicked Three Times'); }


6. hover()

The “hover()” can take one function or two functions as arguments.

When 2 functions are provided, the first function is called when the mouse enters the selected element and the second function is executed when the mouse leaves the element. When only one function is provided, the same function is called when the mouse enters or leaves the element.

<div id="div1">Click Me</div>
$(document).ready(function () {
    function () { $('#div1').text('Mouse is over me.'); },
    function () { $('#div1').text('Where is the mouse?'); }


7. Event Bubbling

Look at the following HTML.

<div id="div1">
  <p id="p1">Hello, <span id="span1">World</span></p>

You add a “click” event handler to all 3 elements(div, p, and span) and clicked the “World”. Which event handler will be invoked? Just one (attached to the most specific element span) or all 3 of them?

In general, events can be propagated in 2 ways:

  • Event Capturing: from outside to inside ( div -> p -> span)
  • Event Bubbling: from inside to outside ( span -> p -> div )

The DOM standard developed general strategy for event propagation: first the event is captured from top to down and then the event bubbles up to the top again. Event handlers can be registered for either part of the process.

But the event propagation model varies among browsers and jQuery uses only the bubbling phase. Therefore the most specific element will get the first change to response to the event.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s