JQuery, the very very basics - Lesson 4
On again with the very basics of JQuery. Thanks again for all of the kicks, dzones, stumbled-upons. I am wearing a permanent thank-you smile now. :)
Now that we have done with the selection and manipulation of JQuery elements, time for some actions (event handling). Actions, reactions, interactions, through which we learn, connect and play, through which web becomes an inseperable part of our lives.
However, it is daunting to create a sophisticated uniform interaction model on the array of competing browsers. Besides, there are different DOM event models. Admit it, how many times have you had this Yes/No interchange between you and your user?
Yes, it works
No, it does not. It does not do anything.
What browser do you use?
...
Well, JQuery shields us with a unified front for cross-browser event handling model. It also allows an event to be tied with or released from multiple event listeners. For any events (blur, change, click, focus, keydown ...), we can access their properties such as keyCode, pageX, pageY, screenX, screenY, shiftKey, target.
Event binding and unbinding: bind() and unbind()
bind(eventType, data, listener)
So instead of attaching a click event to an image as the following:
<img id="img1" src="arrowup.jpg" onclick ="showMe()">
With JQuery, we bind event handler(s) using the bind() command.
It is easy to uniformly handle an event of a matched set of elements with JQuery selectors and the
bind() command.
For example, modified the above code a little,
Now we have just instructed every image on a page to respond the click event.
The bind() command can be used to bind indefinite event handlers to one event. Again, consider the above example, change it a bit:
Every coin has two sides. We bind then we unbind, in either of the following ways:
unbind(eventType, listener)
unbind(event)
Directly using event names and triggering event handlers: eventName() and trigger()
The most common-place events get first-class, convenience treatment. For these everyday, everywhere events: click, focus, select, submit, blur, we can omit the bind() command and directly set up handlers for them.
The syntax is: eventName(listener), such as click ( function () { } ) ;
or simply eventName(), such as click () ;
For example,
$('img').click(function(event) { alert('My id = ' + this.id);});
$('img#clickMe').click() // this fakes a click action from the image whose id = clickMe
trigger(eventType)
Sometimes it is necessary to trigger an action instead of merely responding. For example, sometimes we want programmatically trigger the action of submitting a form. How can we do it? Go trigger.
//...
trigger('submit');
We can trigger such action through the firing of another event.
Toggling event handlers: toggle(handler1, handler2, handler3, ...)
With JQuery, convenience is the key. If there is a behavior that occurs habitually, there is bound to be a command that helps you to do just that. Such is case of toggling. As you can see from the syntax of the toggle() command, you can toggle among a good number of handlers.
Toggling is good to adjust styles of a matched set of elements. First time, I turn blue; next time, I go green; then, I change to red ... until I change back to blue. Again. And again.
Hovering over: hover(mouseoverhandler, mouseouthanlder)
hover() is another example of convenience command. We are all delighted to see hyperlinks and images change into and out of different style or images. For that, we all have been busy writing out mouseover() and mouseout() code. Now, with JQuery, we just call this command: hover().
