Working with Events in jQuery
- Event Handling in JavaScript and jQuery
- Binding an Event Handler to an Event
- Binding Multiple Event Handlers
- Binding Event Handlers Using Shortcuts
- Calling Event Handlers Only Once
- Unbinding Event Handlers
- Using the Event Object
- Getting Mouse Coordinates
- Getting the Event Type
- Capturing Keystrokes
- Capturing Hover Events
- Getting Event Targets
This chapter is from the book
This chapter is from the book
This chapter is from the book
JavaScript is all about making your pages come alive—but you won't get very far without events.
Events let you respond to user actions such as clicks, double-clicks, mouse movements, and keystrokes. That's the kind of thing that JavaScript is good at, and it's one of the mainstays of jQuery.
Why is event handling so important in jQuery? jQuery unifies event handling in multiple browsers, whereas cross-browser event handling in straight JavaScript is a nightmare.
Event Handling in JavaScript and jQuery
If you've ever tried to support, say, drag-and-drop operations in a cross-browser way in straight JavaScript, you know the difficulties. Internet Explorer and Firefox have very different ways of handling events, from top to bottom, and you have to invest a lot of code in smoothing out the differences.
When you move the mouse, for example, an event object is created in both browsers that contains the mouse position information, such as the X and Y location of the mouse. But the way you access that event object is entirely different in the two browsers.
In both browsers, you set up JavaScript functions called event handlers (also called listeners) to execute code when the corresponding event occurs. But the way you connect event handlers to events differs between the two browsers. And the way you access the event object differs. In Internet Explorer, the event object is a subobject of another browser object, and in Firefox, the event object is passed to your event handlers.
The nightmare only begins there. You access the mouse position and other items such as the page element that the mouse is over through event object properties. And those properties have different names—and sometimes different meanings—depending on the browser in which your code is running.
So in addition to writing your code, you have to work with different properties. In fact, if you try to support drag-and-drop using straight JavaScript in the two browsers, you'll need to start by determining which browser the user has, and then execute entirely different code depending on the browser.
So that's double the code that you need to write, and double the testing you have to do. And you'll quickly find yourself doing this double work if you write any JavaScript beyond the most basic event handlers that just pop up an alert box on the screen.
That's where jQuery comes in. jQuery unifies event handling with a single way of attaching event handlers to page elements, a single type of event object, and a single set of event object properties. This alone is worth the price of admission.
jQuery also allows you to attach multiple event handlers to page elements and uses standard names (such as click) for events, making working with these events easier. It also makes the event object easily available to event handlers by simply passing that object to event handlers.
That's not to say that event handling in jQuery is not sophisticated. You can also cancel event bindings and create event handlers that execute only once. You can even call alternate event handlers every other time an event happens.
It all takes place in jQuery. Let's start digging into event handling now.