Skip to main content

Inline Action Listeners in Javascript


Introduction:
This tutorial is on how to use inline listeners through jQuery/Javascript in HTML elements.

Inline?
Inline simply means that the code is written inline with the element that it is linked to, as opposed to elsewhere within the same file, or even an external file like most .css (Cascade Styling Sheets) are.

Listeners:
There are many different listeners which can be used to interact with the users actions, a couple I will show you how to use are;
onmouseover
onclick

As I am sure you can depict from the above two examples, onmouseover occurs when the user's mouse enters the area of the element in question, while 'onclick' is actived once the user's mouse clicks on the area of the element in question.

Calling:
Here is a basic div element with some basic inline CSS to make it 500x500...

  1. <head>
  2. </script>
  3. </head>
  4. <body>
  5. <div id='act' style='height:500px;width:500px;background-color:blue;'>
  6. </div>
  7. </body>
  8. </html>

Notice that we already have our script tags ready for our javascript to be written within our 'head' section of our file.

As you can see, I said the div 'act' (ID) has 'inline css'. You can see that the css styling is declared for the element within it's declaration tag. Javascript works in exactly the same way, so let's add my two examples from earlier...

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

Now, if you refresh your page and then click on the big, blue div, you should get an alert message box pop up saying; 'Mouse Clicked Me!'.

As you can see, the alert message box popped up because we have set our 'onclick' inline listener to alert the message 'Mouse Clicked Me!'.

onMouseOver:
However, if you move your mouse over the area of the div, you can see from the page that nothing happens; but in the code we have something declared for it already - so what's wrong?

Our current code;

  1. onmouseover='moveOver();'

Runs the 'moveOver' function once the user's mouse has entered the area of the div... but we haven't made the 'moveOver' function yet. Let's create it now and output another alert box...

  1. <script>
  2. function moveOver() {
  3. alert("Mouse Over!");
  4. }
  5. </script>

Testing:
Now save the page, and load it in to your browser or web host.

Hover over the div with your mouse, and receive an alert message box saying;
'Mouse Over!'

And then click, and we get;
Mouse Clicked Me!

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.