HTML5

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

 

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.
Subscribe
Notify of
guest

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

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Back to top button