The event interface in JavaScript represents any event that takes place in the DOM. Events can be user-generated or generated by an API, and they can include anything from basic user interactions to something happening in the rendering model. To interact with the DOM and make your JavaScript react to events, you can add an event listener.
The most common way to respond to events is by adding an event listener. When you add an event listener, you tell it what event to listen for and give it a function to invoke when it detects that event has fired. The basic syntax for adding an event listener looks like this:
document.addEventListener('click', function() {
// Logic inside function
});
In this example, we're adding a click event listener to the entire document, and we're passing in an anonymous function as the second argument. Inside this function, we can put any code we want to execute when the click event is detected.
When you add an event listener, you give it a function to invoke when the event fires. This function is called the event handler, and it can be defined inline or as a separate function. Here's an example of an event handler defined inline:
document.addEventListener('click', function() {
alert('Something was clicked!');
});
addEventListener
is an anonymous function that simply displays an alert.When an event is detected, the event handler function is automatically passed an event object as its first argument. This object contains properties and methods that are common to all events, such as the type of event that was detected and the element that fired the event. Here's an example of how to access the type property of the event object:
document.addEventListener('click', function(event) {
console.log(event.type);
});
In this example, we're logging the type property of the event object to the console when a click event is detected.
You can also handle events by using the "on" attribute, which allows you to define a function that will be executed when an event fires. Here's an example:
<button onclick="handleClick()">Click me</button>
<script>
function handleClick() {
alert('Button was clicked!');
}
</script>
In this example, we're using the "onclick" attribute to define the function that will be executed when the button is clicked. However, this method has a couple of drawbacks. First, you can only define one function per event. Second, it's harder to remove an event listener that was defined using the "on" attribute.
You can add multiple event listeners to the same element, and you can also listen for multiple event types. Here's an example:
const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
console.log('Button was clicked!');
});
button.addEventListener('focus', function() {
console.log('Button received focus!');
});
button.addEventListener('blur', function() {
console.log('Button lost focus!');
});
In this example, we're adding three event listeners to the same button element. The first listener listens for the click event, while the second and third listeners listen for the focus and blur events, respectively. Each event listener has its own function that will be invoked when the corresponding event is detected.
keydown
and keyup
events in JavaScript. Here's an example:document.addEventListener('keydown', (e) => {
console.log(e.keyCode);
});
document.addEventListener('keyup', (e) => {
console.log(e.keyCode);
});
keyCode
property of the event object e
contains the Unicode value of the key that was pressed.keyCode
property of the event object e
. Here's an example:document.addEventListener('keydown', (e) => {
console.log(e.keyCode);
});
You can look up the Unicode value of a key online, as there is no logical order to the key codes.
preventDefault()
method of the event object e
. Here's an example:document.addEventListener('keydown', (e) => {
if (e.keyCode === 32) {
e.preventDefault();
}
});
This will prevent the default behavior of the spacebar key, which is to scroll the page.
setTimeout()
and clearTimeout()
methods in JavaScript. Here's an example:let timer;
document.addEventListener('keyup', (e) => {
clearTimeout(timer);
timer = setTimeout(() => {
console.log('debounced event');
}, 1000);
});
keyup
event, so that the callback function is only called after one second of inactivity.DOMContentLoaded
event and the load
event using the addEventListener()
method in JavaScript. Here's an example:document.addEventListener('DOMContentLoaded', (e) => {
console.log('DOM content loaded');
});
window.addEventListener('load', (e) => {
console.log('page loaded');
});
DOMContentLoaded
event fires when the initial HTML document has been completely loaded and parsed, without waiting for external resources to finish loading. The load
event fires when all external resources have finished loading, including images and stylesheets.