grammar

element.addEventListener(event, function, useCapture);
Copy the code

First argument: the type of the event (e.g. “click” or “mousedown”).

The second argument: the function called after the event is fired;

The third argument (Boolean, optional) describes whether the event is bubbling or being captured;

Note: Do not use the “on” prefix. For example, use “click” instead of “onclick”.

We can use function names to refer to external functions:

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

element.addEventListener("click", myFunction);

function myFunction(a) {
    alert ("Hello World!");
}
Copy the code

Add an event handle to the Window object:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});
Copy the code

Passing parameters

When passing an argument value, call a function with an argument using “anonymous function” :

var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
Copy the code

Event bubbling or event capture?

There are two ways to pass events: bubbling and capturing.

Event passing defines the order in which element events are fired. If a

element is inserted into a

element and the user clicks on the

element, which element’s “click” event is fired first?

In a bubble, the inner element’s events are triggered first, then the outer element’s, that is, the

element’s click event is triggered, then the

element’s click event is triggered.

In capture, events for external elements are triggered before events for internal elements, i.e., click events for

elements are triggered before click events for

elements are triggered.

The addEventListener() method can specify the “useCapture” parameter to set the transfer type:

addEventListener(event, function, useCapture);
Copy the code

The default value is false, that is, bubbling pass, and when true, events are passed using capture.

document.getElementById("myDiv").addEventListener("click", myFunction, true);
Copy the code

RemoveEventListener () method

The removeEventListener() method removes the event handle added by the addEventListener() method:

element.removeEventListener("mousemove", myFunction);
Copy the code

Browser Compatibility processing

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // All major browsers except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 and earlier
    x.attachEvent("onclick", myFunction);
}
Copy the code

Internet Explorer 8 and earlier, Opera 7.0 and earlier do not support the addEventListener() and removeEventListener() methods. However, for such browser versions you can use the detachEvent() method to remove event handles:

element.attachEvent(event, function);
element.detachEvent(event, function);
Copy the code

Develop reading

  • Vue Advanced (79) : Using postMessage for Parent-child Communication across domains
  • Advanced Vue (92) : Inter-window Communication postMessage
  • Vue Advanced (86) : Cross-domain Communication between Iframe and Window.postMessage in Vue