With jQuery, Web developer can fully and dynamically manage events by:
-Adding a handler to the events of a control on a page. He/she can add a handler that’s triggered when a button is clicked, when a drop-down item is changed, or when the value of a text box is changed.
-Removing a handler in the same way as adding and even trigger a specific event
In classical case when Web developer wants to show a message when the user clicks a button he/she should write the following code:
HTML:
<input type=”button” onclick=”action();” />
JavaScript:
function action(){ alert(“you clicked the button”); }
In this code Web developer mixes up JavaScript in the HTML code. HTML should contain only representational data, leaving to JavaScript the task of adding behavior. jQuery lets Web developer strips out that onclick from the HTML and lets him/her easily add a handler to the onclick event:
HTML:
<input type=”button” id=”btn”/>
JavaScript:
$(function(){
$(“#btn”).click(function(){
alert(“you ckicked the button”);
});
});
When the page is loaded, Web developer retrieves the button and add the event handler through the click method. The code has increased, but the benefits are enormous because the clean separation of tasks he/she’s gained between the HTML and JavaScript makes things easier to maintain.
jQuery has a method for each event type. For example, Web developer can use the change method to attach a handler when a drop-down item is changed or when a text box value changes. focus and blur are used to attach an event when a control is in and out of focus, respectively.
Sometimes Web developer might want to trigger an event programmatically. To do this, he/she just need to invoke the same methods described above, without passing any parameters.
For example, to trigger the click event of the button, Web developer can write the following statement:
$(“#btn”).click();