If you’re just getting started with JavaScript, you may be wondering what sorts of things can happen in your code. In this article, we’ll go over some of the most common events in JavaScript so that you can get a better understanding of how they work.
Checkout this video:
Introduction
– JavaScript is a ‘event driven’ language.
– that means that instead of waiting for a program to finish executing, JavaScript will execute different bits of code depending on what events happen.
– an event is something that happens in the ‘world’
– the user clicks on an element
– an HTTP request completes
– the window finishes loading
– each event has different properties that describe what happened
– for example, the ‘click’ event has a ‘pageX’ and ‘pageY’ property that tells you where on the page the click occurred
What is an Event?
An event is something that happens (or might happen) in the system. An event can be generated by the user (for example, clicking a button on the page), or generated internally by the browser (for example, loading a page). We can register JavaScript code to run when an event occurs.
Events are normally used in combination with functions, and the function will take an action when the event occurs. Functions will often receive an argument which is data related to the event. For example, when a user clicks on an element on a page, we can check the element’s id and run different code depending on which element was clicked.
There are many different types of events, and we can register our code to run for all of them, or just some of them. The most common events are:
-click
-mouseover
-mouseout
-load
-unload
The Event Object
In JavaScript, the thing that defines an event is an object. This object is called the event object. The event object contains information about the event that has occurred. Most importantly, it contains a type property that indicates the type of event that has occurred. Other common properties include altKey, shiftKey, ctrlKey, data, and target.
In addition to its properties, the event object also has methods. The most commonly used method is preventDefault(), which prevents the default action from occurring. For example, if you have a link on your page and you don’t want it to be followed when clicked, you would call preventDefault() on the event object.
There are many other events in JavaScript beyond mouse events and keyboard events. These include load events, unload events, resize events, scroll events, and form events.
The Event Handler
JavaScript provides various ways to detect and handle events. The most common way is to use an event handler, which is a function that runs when an event occurs. For example, you could use an event handler to do something when the user clicks a button on the page, or when the user types something into a form field.
Event handlers can be added to elements in the HTML code, or to elements that are created after the page has loaded. For example, you could add an event handler to a button element in the HTML code:
Or you could add an event handler to a button element that is created after the page has loaded:
var btn = document.createElement(“BUTTON”);
btn.onclick = function() {
doSomething();
};
There are many different kinds of events that can occur on a web page, and each type of event has its own event handler. The most common kinds of events are:
-Mouse events (such as click, dblclick, mouseenter, mouseleave, etc.)
-Keyboard events (such as keypress, keydown, and keyup)
-Form events (such as submit)
-Window events (such as load)
The Event Listener
An event listener is a procedure in JavaScript that waits for an event to occur. That event could be the user clicking a button, moving their mouse, or pressing a key on their keyboard. If that event happens, the code in the event listener is executed.
Conclusion
Now that we’ve gone over the different types of events in JavaScript, let’s talk about how they’re triggered. Generally, events are triggered by either user input (such as a click or keypress) or by an automated system (such as a timer or network activity).
In most cases, event handlers are registered using the addEventListener() method. This method takes two arguments: the type of event to listen for, and a function that should be executed when the event occurs. For example:
var el = document.getElementById(‘my-element’);
el.addEventListener(‘click’, function() {
// Do something when the element is clicked!
});
It’s also possible to register event handlers directly on elements using HTML attributes such as onclick and onkeypress. However, this approach is generally considered outdated and is not recommended.
