Any action that occurs when we interact with a website is a JavaScript event. These actions include hitting a key on the keyboard, selecting an option in a select box, moving the mouse cursor, and so on. A JavaScript event handler is a function that is called when any of these events fires.
In this article, we are going to talk about event handlers, their implementation, and its components with various coded examples.
Events
You may create JavaScript code that responds to certain conditions using events.
Events that come to mind are −
- Pressing a key
- Webpage loading finished
- Clicking a link on the web-page
What are Event Handlers?
JavaScript gives us event handlers so we may execute our pieces of code when certain events take place. Every event handler in JavaScript begins with the word on and deals with a particular kind of event.
Implementing an Event Handler
To implement an event handler, we typically include the event handler name inside the HTML element of the object we wish to manipulate, followed by the phrase “SomeJSCode,” where SomeJSCode denotes the JavaScript code we want to execute when the event fires.
<html>
<body>
<input type="submit" name="IamHere" value="Hey there!" onclick="alert('Welcome!')"/>
</body>
</html>If we want our markup(HTML) to adhere to the XHTML specification, we should use all lowercase letters in the HTML text instead of capital letters like the original JS event handler (“onClick”). Names of every element and attribute must be in lowercase in XHTML.
Managing Events
Various ways for Javascript to handle an event There are three methods for managing events, or you might say three different kinds of event handlers.
- Using addEventListener to handle
- using the object method for handling
- Using the HTML inline property to handle
Using addEventListener
The ideal approach to handle an event is using addEventListener since removeEventListener allows you to get rid of the related handlers.
The listener mentioned above comes in two varieties.
- Capture − Here, the parent of the element takes precedence over the one in which the event occurs.
- Bubble − In this case, the actual element where the event occurs is given precedence over its parent.
Syntax
document.addEventListener("click me", function(){
document.getElementById("example").innerHTML = "Hello Tutorials Point!!";
});Using an object method
Every element in the DOM has a method that may be used to handle events, such as onclick, ondrag, and onkeypress. This method allows you to pass a function that accepts the event object as an argument.
Syntax
objectName.methodName()Using the HTML inline property
Events may also be handled using an HTML inline property thanks to the HTML syntax.
Function calls are accepted as values for these properties.
The callback parameter for the event handlers is an event object that contains information about the event.
Syntax
<html_element event_handler="event_function()">Text</html_element>