Skip to main content

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...

  1. <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  2. <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

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.

  1. <div id='act' style='height:500px;width:500px;background-color:blue;' onmouseover='moveOver();' onclick='alert("Mouse Clicked Me!");'>
  2. </div>

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...

  1. <script>
  2. </script>

Within those 'script' tags, we want to write our document ready function. This is the shorthand version as it is quicker to write...

  1. $(function() {
  2.  
  3. });

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 (.).

  1. $('#act')

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...

  1. $('#act').on('click', function() {
  2.  
  3. });

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...

  1. $('#act').on('click', function() {
  2. alert('MessageBox listener activated!');
  3. });

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...

  1. <div id='act' style='height:500px;width:500px;background-color:blue;' onmouseover='moveOver();'>
  2. </div>

Now, we can simply open the page in our browser, hover over, and click on the div to see the messageboxes pop up!

Finished!

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.