Adding event listeners click, mouseover, etc.
In JavaScript programming, event listeners are used to manage and control web user interactions with element resources in the website webpage DOM, such as system mouse clicks, mouse multiple movement activities, mouse key press activities, etc. Where event listeners allow web developers to respond to multiple events in DOM elements, through which web developers can create a website interactively.
So, let’s get to know more about event listeners in JavaScript such as mouse click, mouseover, mouse keydown, etc.
What is an event listener in JavaScript?
In JavaScript programming DOM, event listener is a built-in system function that waits for a particular event to occur on a webpage specific DOM element such as mouse button click action, mouse movement, etc. triggered by the user. When an event is triggered or executed in the DOM system, the event listener executes the existing function, allowing web developers to define the event listener’s behavior or multiple actions in response to that event.
The syntax for adding an event listener in JavaScript.
element.addEventListener(‘event’, callbackFunction);
- element – Element This is a DOM element to which the user adds an event listener.
- ‘event’ – This is the type of event in the DOM element, such as a movement event like ‘mouse click’, ‘mouseover’, ‘keydown’, etc.
- callback function – This is the function in the DOM element that is executed when the event completes.
Types of common events in JavaScript.
Here are some of the most commonly used event types in JavaScript programming, which programmers can use for event listener activities or tasks in JavaScript programming.
common System EventListener Type.
- click – This event is triggered in the listener when a web user clicks on a DOM element such as a button, link.
- mouseover – This event is triggered in the listener when a web user hovers over an element in a DOM element with the mouse pointer.
- mouseout – This event is triggered in the listener when a web user releases the mouse pointer from an element in a DOM element.
- keydown – This event is triggered in the listener when a web user presses a key on a DOM element.
- keyup – This event is triggered in the listener when a web user releases a key on a DOM element.
- submit – This event is triggered in the listener when a web user submits a form to a DOM element.
- focus – This event is triggered when the web user focuses on an input element in a DOM element in the listener.
- blur – This event is triggered when the web user loses focus on an input element in a DOM element in the listener.
- resize – This event is triggered when the web user modifies the window size in a DOM element in the listener.
Adding event listeners for different events in JavaScript.
Click Event Activities.
This is one of the most common events in event listeners. The click event is used when the web user manually clicks on a DOM element, such as a button.
<button id=”testButton”>press Button </button>
// let create code to the Select the button
const button = document.getElementById(‘testButton’);
// let we can Add a click event listener to execute dom event
button.addEventListener(‘click’, () => {
alert(‘Button was pressed’);
});
mouseover and mouseout DOM event tasks in JavaScript.
In JavaScript DOM, mouseover event is triggered or executed when internet user manually hovers over an element in mousepointer, whereas mouseout event is triggered or executed when internet user moves mouse pointer outside the element.
<div id=”hoverrange” style=”width: 230px; height: 230px; background-color: lime;”>
let Hover over
</div>
// let we can Select the hover range element
const hoverrange = document.getElementById(‘hoverrange’);
//let we Add a mouseover event listener in hover action
hoverrange.addEventListener(‘mouseover’, () => {
hoverrange.style.backgroundColor = ‘aqua’; //we Change here background color on hover action
}
// here we Add a mouseout event listener action
hoverrange.addEventListener(‘mouseout’, () => {
hoverrange.style.backgroundColor = ‘yellow’; // here we Reset background color when mouse leaves with mouseout
}
keydown and keyup event tasks in JavaScript.
In JavaScript programming, the keydown event action is executed or triggered when a key is pressed by the Internet user, and the keyup event is performed, or the key is released by the Internet user.
<input type=”text” id=”inputField” placeholder=”Write desire text here…” />
// here we can Select the input field type
const inputField = document.getElementById(‘inputField’);
// now let we Add a keydown event listener to action
inputField.addEventListener(‘keydown’, (event) => {
console.log(`Key cliked: ${event.key}`); // here Log the key is clicked
});
// now here we Add a keyup event listener action
inputField.addEventListener(‘keyup’, (event) => {
console.log(`Key release: ${event.key}`); // here the Log the key is released
});
JavaScript submit button event for a form.
The submit event is triggered when the submit button is pressed on a form in a JavaScript webpage, the main use of this event is for online form validation.
<form id=”testForm”>
<input type=”text” id=”emp_name” placeholder=”Employee name” />
<button type=”submit”>Submit</button>
</form>
// let here we Select the form for submit action
const form = document.getElementById(‘testForm’);
// let we Add a submit event listener to submit form
form.addEventListener(‘submit’, (event) => {
event.preventDefault(); // here it Prevent the form from actually submit activities
alert(‘Form submit’);
});
Event Listener Parameters in JavaScript.
While adding an event listener to a JavaScript program, programmers can receive information about the previously occurred event. Where the event object contains descriptions, such as, which key was pressed during the event, which element in the DOM element was clicked, etc., information is stored in it.
Event Listener Parameters Example.
button.addEventListener(‘click’, (event) => {
console.log(event); // here it Logs the event object activities
console.log(‘Dom Element click:’, event.target); // here it Logs the element that was click action
});
Removing an event listener in JavaScript.
When users don’t want a particular DOM event listener in JavaScript, programmers can also remove the existing DOM event listener. For this, users can apply the removeEventListener() method, which requires the same parameters as the addEventListener() method.
const button = document.getElementById(‘testButton’);
// here we Define the event handler function action
const manageClick = () => {
alert(‘Button is click’);
};
// here we Add the event listener action
button.addEventListener(‘click’, manageClick);
// here we Remove the event listener action
button.removeEventListener(‘click’, manageClick);
Event Propagation and Bubbling in JavaScript.
In JavaScript programming, events in the DOM happen in two steps.
- This capture phase involves the event moving down in the DOM.
- This bubbling phase involves the event moving up in the DOM.
By default, in JavaScript programming, most events are performed in bubble up order, which means an event triggered on a child element triggers the same event on its parent element unless that event is stopped.
If JavaScript programmers want to stop an event from bubbling, they apply the stopPropagation() method on the event object.
button.addEventListener(‘click’, (event) => {
event.stopPropagation(); // here it use to Prevent the event from bubbling up action
alert(‘Button is click’);
});
Event Delegation in JavaScript.
Instead of adding an event listener to multiple different child elements in a JavaScript webpage DOM element, programmers can use event delegation by adding the listener to the parent element. This is useful when programmers have dynamically created elements or there are a large number of equal elements.
<ul id=”list”>
<li>task 1</li>
<li>task 2</li>
<li>task 3</li>
<li>task 4 </li>
</ul>
// here we Add a click event listener to the parent list <ul> dom element for webpage
const list = document.getElementById(‘list’);
list.addEventListener(‘click’, (event) => {
if (event.target.tagName === ‘LI’) {
alert(`Item click ${event.target.textContent}`);
}
});
Summary of Event Listeners in JavaScript Programming.
- Add event listeners – Use the addEventListener() function to add an eventlistener to a JavaScript DOM element such as click, mouseover, keydown, etc.
- Common events – Use events to trigger or execute events such as click, mouseover, mouseout, keydown, keyup, submit, etc. in a JavaScript DOM element.
- Remove event listeners – Use the removeEventListener() function to remove an event listener from a JavaScript DOM element.
- Event object – Provides log information about events that occurred in a JavaScript DOM element such as event.target, event.key.
- Event propagation – Events bubble up in a JavaScript DOM element by default, but you can stop this with the stopPropagation() function method.
- Event delegation – Adds event listeners to parent elements for efficient event management of child elements in a JavaScript DOM element.
