Loading...

​​JavaScript Event Listener

​​Any time you interact with a webpage, you generate all kinds of events. An event is something you do on the web page, like moving your mouse around, scrolling, or clicking a link. Browsers "listen" for events and, with JavaScript, we can do something in response to an event.

​​

​​DOM Events

​​

​​Event Name	​​Fired When
​​click​	​​Mouse button has been pressed and released on an element.
​​dblclick​	​​Mouse button is clicked twice on an element.
​​mousedown​	​​Mouse button is pressed on an element.
​​mouseup​	​​Mouse button is released over an element.
​​mousemove​	​​Mouse is moved over an element (fired continuously as the mouse moves).
​​mouseenter​	​​Mouse is moved onto the element that has the listener attached.
​​mouseleave​	​​Mouse is moved off the element that has the listener attached.
​​mouseover​	​​Mouse is moved onto the element that has the listener attached or onto one of its children.
​​mouseout​	​​Mouse is moved off the element that has the listener attached or off one of its children.
​​touchstart​	​​One or more touch points are placed on the touch surface.
​​touchend​	​​One or more touch points are removed from the touch surface.
​​touchmove​	​​One or more touch points are moved along the touch surface.
​​keydown​	​​ANY key is pressed
​​keyup​	​​ANY key is released
​​keypress​	​​ANY key (except Shift, Fn, or CapsLock) is in a pressed position (fired continuously).
​​load​	​​The browser has finished loading.

​​Read more: A thorough list of DOM events - MDN

​​

​​Listening for Events with addEventListener()​

​​

​​We’ve learned adding these events using event handler on your HTML document. See ​+JavaScript Clicks​. Here’s another way to do it in your JavaScript.

​​

​​The target.addEventListener()​ method registers the specified listener on the event target it's called on. So this registration sets up the callback to fire in response to the specified event. The callback function is often where we will select and manipulate elements in the DOM. And it is often called an event handler.

​​

​​For example, we will have an HTML element as our event target, so that it will listen to the click event, meaning that something will happen when the user click on the target element:

​​let target = document.getElementById('target');

​​

​​This:

​​target.addEventListener('click', () => {

​​  // do something

​​});

​​Is equal to:

​​target.addEventListener('click', function() {

​​  // do something

​​});

​​

​​