JavaScript is partly an object-oriented language.
To learn JavaScript, we got to learn the object-oriented parts of JavaScript.
In this article, we’ll look at event handling.
Stop Propagation
We can stop events from bubbling up with the stopPropagation method.
If we don’t want events to propagate from the element where the event originated to the document and everything in between, we can write:
const div = document.querySelector('div');
div.addEventListener('click', (e) => {
e.stopPropagation();
alert('clicked');
});
e is the event object.
And we can call stopProgation on it so that only the listener for the div will listen to the click event.
Prevent Default Behavior
We can prevent the default behavior of the browser by calling the preventDefault method on it.
For example, if we have the following HTML:
<a href='http://example.com'>click me</a>
We can listen to the click event by writing:
const a = document.querySelector('a');
a.addEventListener('click', (e) => {
if (!confirm('You sure you want to leave?')) {
e.preventDefault();
}
});
We have a confirm function call to show a dialog.
If the user clicks Cancel, then the function returns false and preventDefault will be called.
Once that’s done, then the default action for the a element, which is the go to the URL in the href attribute, will be stopped.
Not all events let us prevent the default behavior, but most do.
If we want to be sure, we can check the cancellable property of the event object.
Cross-Browser Event Listeners
Most modern browsers implement the DOM 2 spec, so the code that we write is mostly compatible with them.
The only difference is in IE, which is being phased out quickly.
Types of Events
There are different kinds of events that can be emitted.
They include mouse events like mousemove, mouseup , mousdown , click , and dblclick .
mouseover is emitted when the user puts the mouse over an element.
mouseout is emitted when the mouse was over an element but left it.
Keyword events include keydown , keypress , and keuyup .
These occur in sequence.
Loading and window events include the load event, which is emitted when an image or a page and all its components are done loading.
unload is emitted when the user leaves the page.
beforeunload us loaded before the user leaves the page.
error is emitted when there’s a JavaScript error.
resize is emitted when the browser is resized.
scroll is emitted when the page is scrolled.
contextmenu is emitted when the right-click menu appears.
Form events include focus when we enter a form field.
blur is emitted when we leave a form field.
change is emitted when we leave a field after the value has changed.
select is emitted when we select a text field.
reset is emitted when we wipe out all inputs and submit is emitted when we send the form.
Modern browsers also have drag events like dragstart , dragend , drop , etc.
Conclusion
We can stop propagation or the default behavior of events.
Also, we can listen to various kinds of events.
