Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
  • 💬 Discuss
This chapter is from the book

This chapter is from the book

Binding an Event Handler to an Event

Event handling in jQuery begins by connecting an event, such as a mouse click, to an event handler. Then when the event occurs, the event handler will be called, and the code in the event handler will be executed.

You bind a page element's event to an event handler using the bind( ) function. For example, if a page contains an image and you want to bind one of the image's events to an event handler, you would execute code like this:

$("img").bind(event, data, handler)

Here, event is a string holding the type of event. The possible values are blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and error.

The data parameter holds optional data you want passed to the event handler as the data property of the event object (you can omit this parameter), and handler is the event handler function.

Here, we'll see how to bind the click event of an image to an event handler that displays an alert box.

To bind an event:

  1. Use a text editor (such as Microsoft WordPad) to create your Web page. We'll use the example bind.html from the code for the book here.
  2. Enter the code to add the jQuery library and an <img> element to the page (Script 4.1).

    Script 4.1. Adding an <img> element.

    <html>
      <head>
        <title>Binding event handlers to
          events</title>
        <script
          src="http://code.jquery.com/jquery-
           latest.js">
        </script>
      </head>
    
      <body>
        <h1>Binding event handlers to
          events</h1>
        <h1>Click the flower...</h1>
        <img id="target" src="Image1.jpg"/>
      </body>
    </html>
    
  3. Add the code to bind the image's click event to an event handler function that displays an alert box (Script 4.2).

    Script 4.2. Binding an image's click event.

    <html>
      <head>
        <title>Binding event handlers to
          events</title>
        <script
          src="http://code.jquery.com/jquery-
           latest.js">
        </script>
    
        <script>
          $(function( ){
            $('#target')
              .bind('click',function(event) {
                alert('Hello!');
              });
          });
        </script>
      </head>
    
      <body>
        <h1>Binding event handlers to
          events</h1>
        <h1>Click the flower...</h1>
        <img id="target" src="Image1.jpg"/>
      </body>
    </html>
    
  4. Save the file.
  5. Navigate to the file in your browser.
  6. Click the image to display an alert box (Figure 4.1).
    Figure 4.1

    Figure 4.1 Triggering an image's click event.

  • + Share This
  • 🔖 Save To Your Account

Discussions

comments powered by Disqus