Inline Action Listeners in Javascript

Submitted by Yorkiebar on Tuesday, August 12, 2014 - 09:44.

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

<html>
	<head>
		<script>
		</script>
	</head>
	<body>
		<div id='act' style='height:500px;width:500px;background-color:blue;'>
		</div>
	</body>
</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...

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

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

<script>
	function moveOver() {
		alert("Mouse Over!");
	}
</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!

Add new comment

30 views

Inline Action Listeners in Javascript

Tags

Add new comment