Event handlers are the properties in the browser or DOM API that handles the response to an event. Let us understand this with an example when we click on any virtual button of the browser a particular task gets executed for us, and eventually, the browser responds to your trigger with some result, or when you hover on a browser component it gets disguised by changing its display properties. This happens with event handlers. Event handlers help you to reflect on an event occurrence.
Different ways of handling an event in Javacript
There are three ways of handling an event or you can say that there are three types of event handlers
Table of Content
Handling with addEventListener
This is the best way to handle an event because you can also remove the associated handlers using the method removeEventListener.
Syntax:
element.addEventListener("event name" , callback , useCapture)
element.removeEventListener("event name" , callback , useCapture)- event name: It is the name of the event.
- callback: It is a function that gets triggered when an event occurs.
- useCapture: A boolean value [Capture: true | Bubble: false] – represents the order in which the listener gets triggered when the events are added in a hierarchy.
There are two types of the above listener.
- Capture: Here the parent of the element gets more priority than the actual element where the event takes place.
- Bubble: Here the actual element where the event takes place gets more priority than its parent.
Example: Here, we are able to print a message on the screen with the click of a button with the help of event handlers.
<!DOCTYPE html><html>
<head>
<title>EventHandlers</title>
</head>
<body>
<div class="buttons">
<button>Press me</button>
</div>
<script>
const buttonContainer = document.querySelector('.buttons');
buttonContainer.addEventListener('click', event => {
document.write('<h1 style="color:green">
GeeksForGeeks</h1>');
})
</script>
</body>
</html>
|
Output:
Handling with object method
Every element in the DOM contains some methods like onclick, ondrag, onkeypress, etc. which can be used to handle the event. You can pass a function to this method which takes the event object a parameter.
Syntax:
element.onclick = (event)=>{ ... }
Example: let us add an object method to press me onclick button which prints ‘GeeksForGeeks’ in <h1>.
<!DOCTYPE html><html><head> <title>EventHandlers</title>
</head><body> <div class="buttons">
<button>Press me onclick</button>
</div>
<script>
const buttonContainer = document.querySelector('.buttons');
buttonContainer.onclick = () => {
document.write("<h1>GeeksForGeeks</h1>");
}
</script>
</body></html> |
Output:
Handling with HTML inline attribute
The HTML syntax also consists of attributes to handle events. These attributes accept function calls as values.
Syntax:
<startTag onclick="myFunction()">content</endTag>The event handlers return an event object as the callback parameter which has the details regarding the event.
Example: We will add the same code as the first example but as an inline attribute.
<!DOCTYPE html><html><head> <title>EventHandlers</title>
</head><body> <div class="buttons">
<button onClick="pressme()">Press me</button>
</div>
<script>
function pressme() {
document.write('<h1 style="color:green">
GeeksForGeeks</h1>');
}
</script>
</body></html> |
Output: