jQuery Internal Listeners

Introduction: This tutorial is on how to create jQuery/Javascript listeners. jQuery: Please ensure that you have included the jQuery libaries within your HTML file. The current latest version can be included by adding the following code to your 'head' tags of your html file... You can check the latest URLs from the official jQuery website. Previously: This tutorial is carrying on from my previous, inline listeners, found here; http://www.sourcecodester.com/tutorials/javascript/7775/inline-action-listeners-javascript.html Inline: In my previous tutorial, when you hover your mouse over the div, it will present a messagebox. The exact same thing happens if you click on the div. The only difference, is that the hover listener runs a javascript function to present a messagebox, while the click listener presents a messagebox directly. ID: You may of noticed that I added 'act' as the ID of the div, but we haven't used it yet. This is because I am going to be using this ID for the internal listeners we will create in a second. Listener: We are going to aim for a messagebox to appear with the text of... 'MessageBox listener activated!'. ... once the user has clicked on the div. It should be noted, that because this javascript listener code is not directly HTML/CSS elements which add to the display of the page, the correct place to put this code is within the 'head' tags of the html page. So first, we want to create our script tags if you haven't already... Within those 'script' tags, we want to write our document ready function. This is the shorthand version as it is quicker to write... Now for the actual listener. First we want to reference to the HTML element - we will use our 'act' ID for this. Because we are using an ID, we preceed the ID name by a hashtag (#), if we were using classes, we would preceed the class name by a dot (.). Next, we want to use the function 'on', we use this by using dot notation after the javascript element followed by the 'on' function. This function takes two parameters, the listening event, and the running function. To create a mouse click listener on the element, we write the following using the 'click' mouse event listener like so... Within the function is the code which will be ran once the element listener is actived - in this case, the element is clicked via the mouse. Messagebox & Testing: Finally, we want to add our alert messagebox code within the listening event function... We also need to edit our div. We can simply remove the inline 'onclick' listener, since we are now handling the 'click' mouse event listener via the code above, held within our 'head' tags... Now, we can simply open the page in our browser, hover over, and click on the div to see the messageboxes pop up! Finished!