Explanation of the case of listening event in Vue

1. Syntax

(event, function, useCapture);

The first parameter: the type of event (such as "click" or "mousedown”), refer to [Event Type】；

The second parameter: the function called after the event is triggered;

The third parameter: (Bolean, optional) is used to describe whether the event is bubbling or capturing;

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

You can use the function name to refer to external functions:

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

("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

TowardsWindowObject Add event handle:

("resize", function(){
    ("demo").innerHTML = sometext;
});

Pass parameters

When passing parameter values, use "anonymous functions" to call a function with parameters:

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

2. Event bubbles or event capture?

There are two ways to pass events:Bubble and capture。

Event delivery defines the order in which element events are triggered. If<p>Insert element to<div>In the element, the user clicks<p>Element, which element's "click" event is triggered first?

existbubbleIn the event of the internal element will be triggered first, and then triggered the external element, that is:<p>The click event of an element is triggered first, and then it will be triggered.<div>Click event for an element.

existcaptureIn the case, the events of the external element will be triggered first, and then the events of the internal element will be triggered, i.e.:<div>The click event of an element is triggered first, then triggered<p>Click event for an element.

addEventListener()Methods can specify "useCapture” parameter to set the pass type:

addEventListener(event, function, useCapture);

The default value isfalse, Right nowBubble delivery, when the value istrueWhen the event is usedCapture delivery。

("myDiv").addEventListener("click", myFunction, true);

removeEventListener() method

removeEventListener()Method removal byaddEventListener()The event handle added by the method:

("mousemove", myFunction);

Browser compatibility processing

var x = ("myBtn");
if () {                    // All mainstream browsers, except IE 8 and earlier    ("click", myFunction);
} else if () {                  // IE 8 and earlier    ("onclick", myFunction);
}

IE 8and earlier IE versions,Opera 7.0It is not supported in earlier versionsaddEventListener()andremoveEventListener()method. However, for this browser version, it can be useddetachEvent()Method to remove event handle:

(event, function);
(event, function);

3. Expand reading

"Vue Advanced (79): Use postMessage to implement cross-domain communication between father and son"

"Vue Advanced (92): Inter-Window Communication PostMessage"

"Vue Advanced (86): Iframe combination in VUE achieves cross-domain communication"

Additional introduction:

addEventListener() event listening

The addEventListener() method attaches the event handler to the specified element.

The addEventListener() method attaches the event handler to the element without overwriting the existing event handler.

You can add many event handlers to an element. You can add many event handlers of the same type to an element, namely two "click" events.

You can add event listeners to any DOM object, not just HTML elements. That is, window object.

The addEventListener() method makes it easier to control the reaction of events to bubbles.

When using the addEventListener() method, JavaScript is separated from HTML tags to improve readability.

And allows you to add event listeners even if you don't control HTML tags.

You can easily delete event listeners using the removeEventListener() method.

This is the end of this article about the addEventListener() monitoring event in Vue. For more related contents of vue addEventListener monitoring event, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!