www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery Binding Events using on() Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27

We use jQuery on() method to attach code to event(s). On the other hand we use the off() method to unattach code from events.

In this lesson we will learn to use the on() method. The off() method will be discussed in the next lesson.

Binding events using jQuery on() method is very simple and easy. The following example illustrates the usage of the on() method:


<a href = "javascript:void(0);" > Test on() </a>
<script type = "text/javascript" >
$ ( function ()
{
$ ( "a" ). on ( "click" , function () {
alert ( $ ( this ). text ());
});
});
</script>

The above example binds the anonymous function to the click event of all the <a> elements. In our example there is just one, but if we increse the number of <a> elements, clicking on all of them would fire the anonymous function above. Lets see another example:

<a href = "javascript:void(0);" > Test on() 1 </a>
<br>
<a href = "javascript:void(0);" > Test on() 2</a>
<br>
<a href = "javascript:void(0);" > Test on() 3</a>
<script type = "text/javascript" >
$ ( function ()
{
$ ( "a" ). on ( "click" , function () {
alert ( $ ( this ). text ());
});
});
</script>

Our above example now has three <a> elements and the same code binds the anonymous function to the click event of each one. The anonymous function displays the link text in an alert box. jQuery automatically assigns the element that is clicked, to the "this" keyword inside of the anonymous function, allowing us to access its different properties.

The on() method, in the above examples, takes two parameters, the name of the event and the function to be called on the happening or occurence of the event.

When jQuery calls our method, it passes information about the event as a parameter to our function in the form of an object. The event object contains the information about the event e.g. where the mouse cursor is, which mouse key or the keyboard key is pressed, etc. We can only use this object and its properties if we have defined our function to receive the event object.

Here is an example:

<div id = "testDiv" style = "background-color:orange ; width: 200px; height : 200px; " >
</div> <br>
<input type="text" id="display" width="30">
<script type = "text/javascript" >
$ ( "#testDiv" ). on ( "mousemove" , function ( event )
{
$ ( "#display" ). val ( event . pageX + "," + event . pageY );
});
</script>

We have created a <div> element of 200x200 pixels. For this <div> element we subscribe to the mousemove event, with an anonymous function taking a parameter called "event". When we move mouse over the <div> element the input field is updated with the mouse position in x and y coordinates. We get the x and the y coordinates from the event object as event.pageX and event.Y.

Note: If you are working with a version of jQuery that is older than 1.7, the on() would not work, so use bind(), instead.
Next >>> Lesson No. 23: jQuery off()





Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.