JavaScript is known to give a webpage the ability to “think and act” which is all possible due to Events. Events act as triggers that prompt the backend scripts to perform actions. They can be easily referred to as “things” that happen on a webpage, these events can be anything: loading a webpage, clicking an HTML button, or hovering the mouse over a specific HTML element.
There are gazillions of events that can trigger JavaScript, we have events to trigger a function on mouse click, or on mouse hover, but we are going to cover working with events and JavaScript.
A simple example of a JavaScript event being executed upon a button press is shown below:
Event Handlers
Events are managed by event handlers; HTML provides the capability to add various types of event handlers on its elements, these event handlers allow the programmer to run JavaScript code by executing a function.
There are 3 types of event handlers:
- Dom-on-event listener
- In-line-event listener
- addEventListener() method
The DOM on-event listener
We can use event listeners on the DOM properties, such as triggering an event upon the complete loading of the webpage. These event listeners can also be added to HTML elements but with the restriction being one event listener per each HTML element.
For example, we want to alert the user on the complete loading of the webpage, we can do that by accessing the window object of the DOM:
window.onload = () => {
alert("The webpage has completely Loaded.");
};
</script>
After running the HTML file you will see the following output:
As you can see, after completely loading the webpage, the JavaScript alerts the user that the webpage has loaded.
Note: the window object is used to work on global events.
The inline-event Listener
One of the trivial methods when working with HTML and JavaScript is to use the inline event listeners, we do this by adding the event listener as an attribute of the element inside its tag.
For example, in the above example, we added an “onclick()” event inside the button element, when we use the inline event listener we set it equal to a function that will get invoked when the event is triggered.
As you can see, btnClicked() is the function that will be executed on a button click.
If we want to print the string to console “You have pressed the button” we can do that by writing the btnClicked() function like this:
function btnClicked() {
console.log("You have pressed the button")
}
</script>
When you run the HTML file you get the following output.
Using addEventListener()
The third event handler is added using the addEventListener() method, This is the new and the most used way of handling events in JavaScript; to show this, we are going to create a div in HTML by using the following lines of code:
<p>addEventListener() Example</p>
</div>
To add an event listener on this div you are going to use the following script snippet:
const div = document.getElementById("demo");
div.addEventListener("mouseenter", (event) => {
console.log("The mouse has appeared");
});
div.addEventListener("mouseleave", (event) => {
console.log("The mouse has left");
});
div.addEventListener("click", (event) => {
console.log("Mouse Clicked on DIV");
});
</script>
If you look closely at the script snippet, you will notice that we are adding 3 different event listeners on this div, one when the cursor enters the div, second when the cursor leaves the div and last one when the cursor clicks on the div; After writing all this code, save it, reload the page, and you will get the following output:
As you can see in the console, our event handlers are working and the JavaScript code is being executed.
That is it for Events in JavaScript
Conclusion
Events in javascript are the occurrence of such instances that prompt the JavaScript to perform some manipulation on the HTML elements or to perform back-end functionality. The event in JavaScript is used to give the HTML webpage the capability to think and perform actions, these events can be anything that a user does: clicking a button, pressing a specific key, or a specific mouse movement. There are some global events as well that can be accessed using the window object, such as the window.load(). We learned about various types of event handlers along with their examples.
from https://ift.tt/31CpHAe
0 Comments