Events in HTML and JavaScript

Events within webpages can be classified as when the user does something and interacts with the page. Code can be hooked onto these events so that it runs when a certain interaction happens on the webpage. There are many interactions that a user can do on a webpage, such as clicking an element, hovering over an element, touching an element on a touchscreen, etc.

The below code shows how to add an ‘onclick’ event to a div within html. This code shows using the ‘onclick’ tag attribute to attach a JavaScript function called ‘onClick’ to the event. This means when a user click on this div then the JavaScript ‘onClick’ will be called.

<div id="myDiv" onclick="onClick()">
    Click Me

The function above must be created within JavaScript in the webpage. The function below shows a simple log statement. This means the div will call this function when a user clicks on the div.

function onClick() {
  console.log("Div was clicked");

That is not the only way to assign a event handler to an element within a html webpage. The below code shows accessing the div using a document selector. Then the variable ‘myDiv’ uses the ‘addEventListener’ function to add a callback to for click events. The ‘addEventListener’ takes two parameters, a String and a function. The String value is the name of the event you want to add a handler for and the second parameter, the function, is what will be called when the event is triggered. The below achieves the same as the above code, a log statement will be printed when the div is clicked.

var myDiv = document.getElementById("myDiv");

myDiv.addEventListener("click", function(){ 
  console.log("Div was clicked");

The last way to assign a event handler to an element within html is shown below. This achieves the same as the first example, it assigns a function to the ‘onclick’ property of an element variable. Using this method is the same as the first method, meaning it will overwrite the first example. So if you assign a event handler using the first function, this example will then overwrite that and only make the last defined function triggered.

var myDiv = document.getElementById("myDiv");

myDiv.onclick = function(){
  console.log("Div was clicked");

The last defined event refers to which definition comes last, when reading the html file from top to bottom. If the pure JavaScript method is located above the html in the file then the html version will trigger. If the JavaScript is written after the html element then the pure JavaScript definition will trigger.

There are many other events available within html, that can be used with the same approaches shown above. These include: ‘mousedown’ which is similar to click, ‘mouseup’ which is when a click is released, ‘mouseover’ which is when the user hovers over an element, ‘mouseenter’ which is similar to hover, ‘mouseleave’ which is when the users mouse leaves the element, ‘touchstart’ which is when a user on a touchscreen device clicks the element, ‘touchend’ which is the touchscreen equivalence of ‘mouseup’, ‘onload’ which is when the page loads, and much more.

1 thought on “Events in HTML and JavaScript

Leave a Reply