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
