Home » HTML5 » Html5 Onclick Event Attribute Example

About Olayemi Odunayo

I am a programmer and web developer, who has experience in developing websites and writing desktop and mobile applications. I have worked with both schematic and schemaless databases. I am also familiar with third party API and working with cloud servers. I do programming on the client side with Java, JavaScript, html, Ajax and CSS while I use PHP for server side programming.

Html5 Onclick Event Attribute Example

In HTML and JavaScript parlance an event can be either something the browser does or something the user does. What this means is that both the browser and the user can trigger an event. An example of a user triggered event is a button click.
 
 
 
 
 
 
 
 

 
An example of a Browser event is page load finished, that’s when a webpage load finishes. When an event occurs, we might want to respond appropriately. For example if a user clicks a button, you can respond by showing an alert message. To listen for events we register an event listener. In this example we are going to learn about HTML and JavaScript click events.
For this example we will use:

  • A computer with a browser installed.
  • notepad++.

1. Getting Started

The onclick event occurs when the user clicks on an element.  A user clicks on an element with the mouse or touches an element in a touchscreen environment. We can listen for click events on an element in so many ways.
One way we can do this is to add an onClick attribute directly to the element. Lets do this in the next section.

1.1 Inline JavaScript

< button value=submit  onclick=press() >
Press
</button>

Above we showed how to add the onclick attribute to an element. The full example is presented below.

index.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> 
Html5 Onclick Event Attribute Example
</title>
	<style>
#pres{
width:90px;
height:30px;
margin:20px;
}

</style>
	</head>
	<body>
<script>
function press(){
alert(" YOU PRESSED ME ");


}

</script>
 <button id=pres  onclick=press() value="press">
Press
</button>
	</body>
	</html>

Note: Inline JavaScript should be avoided because it makes the markup bigger and less readable. The content, structure and behavior are not well-separated, thus making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the Window object, thus polluting the global namespace.

1.2 Other Methods

document.getElementById("pres").onclick=function (){

}

A full example below

index2.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> 
Html5 Onclick Event Attribute Example
</title>
	<style>
#pres{
width:90px;
height:30px;
margin:20px;
}

</style>
	</head>
	<body onload=init()>
<script>
function init(){
var v=document.getElementById("pres")
v.onclick=press;
}

function press(){
alert(" YOU PRESSED ME ");


}

</script>
 <button id=pres  value="press">
Press
</button>
	</body>
	</html>

We register an event handler in line 31 (when the webpage finishes loading, our function init is called). In the init function we add an event listener to our button object. Another way of listening for events on an object below:

object.addEventListener("click",function);

With this method we first get the button(or any other element) object and call the above function on it. The above function can take two or three parameters. The first parameter is the event we want to listen too. (In this case a click event).
Notice we didn’t put the “on” prefix, when using this method. We don’t add the “on” before the event whenever we use this method. The second parameter represents function we want to call to handle the event. The third parameter is always a boolean which can be either true or false. It specifies whether the event should be executed in the capturing or in the bubbling phase.
Tip: You can remove or detach an event listener added with addEventListener by calling document.removeEventlistener(); .A full example is shown below:

index3.html

<!DOCTYPE html> 
<html lang=en>
	<head>
	<style>
	html, body{
	width:100%;
	height:100%;
	margin:0%;
	font-family:"helvetica","verdana","calibri", "san serif";
	overflow:visible;
	padding:0%;
	border:0%;
	}
	 
	</style>
	 		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
	
	<title> 
Html5 Onclick Event Attribute Example
</title>
	<style>
#pres{
width:90px;
height:30px;
margin:20px;
}

</style>
	</head>
	<body onload=init()>
<script>
function init(){
var v=document.getElementById("pres")
v.addEventListener("click",press,false);
}

function press(){
alert(" YOU PRESSED ME ");

}

</script>
 <button id=pres  value="press">
Press
</button>
	</body>
	</html>


2. Summary

In this example we learnt about JavaScript events. We also wrote a detailed tutorial about HTML and JavaScript onclick events and how to handle them.

3. Download the source code

Download
You can download the full source code of this example here: html5onclickexample

 

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments