JavaScript operates on HTML DOM using EventListener basics

AddEventListener () method
Instance
Click the button to trigger the listener event when the user clicks:

document.getElementById ("Mybtn"). AddEventListener ("click", Displaydate);

The AddEventListener () method is used to add an event handle to the specified element.
The event handle added by the AddEventListener () method does not overwrite an existing event handle.
You can add multiple event handles to an element.
You can add multiple event handlers of the same type to the same element, such as two "click" Events.
You can add event sniffing to any DOM object, not just HTML elements. Such as: Window object.
The AddEventListener () method can be simpler to control events (bubbling and capturing).
When you use the AddEventListener () method, JavaScript separates from the HTML tags and is more readable and can add event sniffing without controlling HTML markup.
You can use the RemoveEventListener () method to remove the listener from the event.
Grammar

Element.addeventlistener (event, function, usecapture);

The first parameter is the type of the event (such as "click" or "MouseDown").
The second parameter is the function that is called after the event is triggered.
The third parameter is a Boolean value that describes whether the event is bubbling or capturing. This parameter is optional.
Note: Do not use the ' on ' prefix. For example, use "click" instead of "onclick."

To add an event handle to the original element
Instance
"Hello world!" pops up when the user clicks on the element:

Element.addeventlistener ("click", Function () {alert ("Hello world!");});

You can use the function name to refer to the external function:
Instance
"Hello world!" pops up when the user clicks on the element:

Element.addeventlistener ("click", MyFunction);

function MyFunction () {
 alert ("Hello world!");
}

Add multiple event handles to the same element
The AddEventListener () method allows multiple events to be added to the same element and does not overwrite events that already exist:
Instance

Element.addeventlistener ("click", MyFunction);
Element.addeventlistener ("click", Mysecondfunction);

You can add different types of events to the same element:
Instance

Element.addeventlistener ("MouseOver", myfunction);
Element.addeventlistener ("click", Mysecondfunction);
Element.addeventlistener ("Mouseout", mythirdfunction);

To add an event handle to a Window object
The AddEventListener () method allows you to add event sniffing to HTML DOM objects, HTML DOM objects such as HTML elements, HTML documents, window objects. or other expense event object such as: XMLHttpRequest object.
Instance
Add event monitoring When the user resets the window for a large hour:

Window.addeventlistener ("Resize", function () {
 document.getElementById ("Demo"). InnerHTML = Sometext;
});

Passing parameters
Use anonymous function to call functions with parameters when passing parameter values:
Instance

Element.addeventlistener ("click", Function () {MyFunction (P1, p2);});

Event bubbling or event capture?
There are two ways to pass events: bubbling and capturing.
Event delivery defines the order in which element events are triggered. If you insert a <p> element into the <div> element, and the user clicks on the <p> element, which element's "click" event is triggered first?
In bubbling, an internal element event is triggered first, and then the external element is triggered, that is, the click event of the <p> element is triggered first, and then the click event of the <div> element is triggered.
In a capture, an event for an external element is triggered before triggering an internal element's event, that is, the click event of a <div> element is triggered first, and then the click event of the <p> element is triggered.
The AddEventListener () method can specify the "usecapture" parameter to set the delivery type:

AddEventListener (event, function, usecapture);

The default value is False, that is, bubbling delivery, and the event uses capture delivery when the duty is true.
Instance
document.getElementById ("Mydiv"). AddEventListener ("Click", MyFunction, True);

Try»

RemoveEventListener () method
The RemoveEventListener () method removes the event handle that was added by the AddEventListener () method:
Instance

Element.removeeventlistener ("MouseMove", MyFunction);

Browser Support
The number in the table represents the version number of the first browser that supports the method.

Note: IE 8 and earlier IE versions, Opera 7.0 and earlier versions do not support the AddEventListener () and RemoveEventListener () methods. However, for this type of browser version, you can use the DetachEvent () method to remove the event handle:

Element.attachevent (event, function);
Element.detachevent (event, function);

Instance
Cross-Browser Workaround:

var x = document.getElementById ("mybtn");
if (x.addeventlistener) {     //All major browsers except IE 8 and earlier versions
 X.addeventlistener ("click", MyFunction);
} else if ( x.attachevent) {     //IE 8 and earlier versions
 x.attachevent ("onclick", myfunction);