JavaScript addEventListener () event listener method

 

addEventListener () method of event handlers that are attached to the specified element.

You can use removeEventListener () method to easily remove event listeners.

语法：element.addEventListener(event, function, useCapture);

• The first parameter is the type (such as "click" or "mousedown") event.
• The second argument is that we want to call a function when an event occurs.
• The third parameter is a Boolean value that specifies whether the use of event capture or event bubbling. This parameter is optional.

Note that you do not use the "on" prefix for the event; with the "click" instead of "onclick".

document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); });

May also be externally defined function, then the function name passed as parameters:

element.addEventListener("click", myFunction);
function myFunction() {
  alert ("Hello World!");
}

Many will add an event handler to the same element

addEventListener () method allows you to add a number of events to the same elements, but does not overwrite an existing event

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);

event

Mouse Events

Click event handler called when an object when the user click. 
contextmenu triggered when the user clicks the right mouse button to open the context menu 
dblclick when the event handler called when the user double-clicks an object. 
mousedown mouse button is pressed. 
mouseenter When the mouse pointer is moved to the trigger element. 
When the trigger element when the mouse pointer moves MouseLeave 
mouseMove mouse is moved. 
mouseover mouse over an element. 
mouseout mouse is moved off an element. 
mouseup mouse button is released.

Keyboard Events

Attribute describes the DOM 
keyDown a keyboard key is pressed. 
keypress of a keyboard key is pressed and released. 
keyup a keyboard key is released.

Frame / Object (Frame / Object) events

Load abort image is interrupted. () 
Beforeunload the event triggered when leaving the page (refresh or close) 
error error occurred while loading a document or image. (And) 
hashchange the event triggered when the anchor portion of the URL of the current modification occurs. 
load a page or an image has finished loading. 
pageshow The event is triggered when the user accesses the page 
pagehide the event in user leaves the current page jump to another is triggered when a page 
resize the window or frame is resized. 
When the scroll event that occurs when the document is scrolled. 
unload user exits the page. ( with)

Form events

Trigger loses focus blur elements 
change the event triggers (,,, and) when the contents of the form elements change 
triggered when focus element gain focus 
focusin element is about to get the focus is on the trigger 
focusout element is about to lose the focus is on the trigger 
input element gets user input is triggered 
when you reset the reset trigger a form 
search user to trigger the search field enter text (

Clipboard events

copy of the event triggered when the user to copy the contents of the element 
cut the event is triggered when the user shear element content 
paste the event is triggered when the user paste the element content

Print Event

The event has triggered afterprint start printing the page, or print window has closed 
beforeprint the event triggered when the page is about to begin printing

Drag events

drag the event triggered when the element is being dragged 
triggered when the event is completed dragend dragging elements in the user 
dragenter the event triggered when dragged into the drop target element 
dragleave the event triggered when the drag element is placed away from the goal 
dragover the event in the drag element when placed on a target trigger 
dragstart the event triggered when the user starts dragging the element 
drop the event triggered when the drag element placed in the target area

Multimedia (Media) event

abort event is triggered when loading the video / audio (audio / video) termination. 
canplay event is triggered when the user can start playing video / audio (audio / video). 
When canplaythrough trigger event is still playable video / audio (audio / video) and without pause and buffer. 
When an event is triggered when changes durationchange long video / audio (audio / video) is. 
the when at The Event Occurs at The emptied Current PlayList IS empty 
ended play event is triggered at the end of the video / audio (audio / video). 
The error event is triggered when an error occurs during video / audio (audio / video) data load. 
loadeddata event to load the video / audio (audio / video) in a browser firing trigger when the current frame. 
Metadata loadedmetadata events in the specified video / audio (audio / video) triggered after loading. 
loadstart event in the browser to start looking specified video / audio (audio / video) trigger. 
When the pause trigger events in video / audio (audio / video) Pause. 
play event is triggered when the video / audio (audio / video) starts playing. 
Pause playing events in video / audio (audio / video) or after re-trigger buffer ready to start playing. 
When the progress event is triggered in the browser to download a specific video / audio (audio / video). 
ratechange event playback speed in video / audio (audio / video) is sent to change the trigger. 
After seeked event trigger repositioning video / audio (audio / video) in the user's playback position. 
When the trigger event began seeking to reposition the video / audio (audio / video) users. 
stalled event acquiring media data in the browser, but triggered when the media data is not available. 
When the trigger event media data abort suspend reading in the browser. 
timeupdate event is triggered when the current playback position transmitter change. 
volumechange event is fired when the volume changes. 
waiting event triggered when the video due to be played next frame buffer is required.

Animation events

animationend the event triggered when the CSS animation is complete 
animationiteration the event triggered when the CSS animations repeat 
animationstart the event triggered when the CSS animation starts

Transition event

transitionend the event after the completion of the transition is triggered in CSS.

Other events

When the message is triggered by the event or from the object (WebSocket, Web Worker, Event Source or sub-frame or parent window) receives a message 
online that the event triggered when the browser to work online. 
This event is triggered when the offline browser to start work offline. 
popstate the event triggered when the browsing history (history objects) window is changed. Occurs the when at The window's Event History Changes 
Show when the event

Element triggered when the context menu is displayed 

 

The storage event is triggered when Web Storage (HTML 5 Web store) update 

 

toggle the event triggered when the user opens or closes element 

 

This event is triggered when the wheel mouse wheel to scroll up and down in elements