js event capture or event bubbling?

definition

Event passes in two ways: bubbling and capture

Event delivery order of the elements defined event trigger.

If you <p> element into the <div> element, the user clicks <p> element, which element of the "click" event to be triggered it?

In the bubble , the internal elements of the event will be triggered first, and then trigger the external elements, namely: click event <p> The first element is triggered, then triggers the click event <div> element

In the capture , the event will first external element is triggered, then the event will trigger internal elements, namely: <div> element to trigger the click event, then click the trigger event <p> element

Part.1 addEventListener() 方法

This method altogether San parameters, and used only the first two, and now we look at the focus of the third

grammar:

element.addEventListener(event, function, useCapture)

The first parameter is the type of event (such as "click" or "mousedown")

The second parameter is called after the event trigger function

The third parameter is a Boolean value that is used to describe the event bubbling or capture. This parameter is optional

Examples Part.2

HTML

< Template > 
    < div class = "Home" > 
        < div the above mentioned id = "myDiv" > 
            < the p- the above mentioned id = "myP" > Click paragraph, I was bubbling. </ The p- > 
        </ div > < br > 
        < div the above mentioned id = "myDiv2" > 
            < the p- the above mentioned id = "myP2" > Click paragraph, I was captured. </ P > 
        </ div > 
    </ div > 
<

<Script> 
    Export default { 
        name: "Home" , 
        Mounted () { 
             document.getElementById ( 'the myP') the addEventListener ( "the Click", () =>. { 
                Alert ( 'P element you click!' ) 
             }, to false ); 
            document.getElementById ( . 'myDiv') the addEventListener ( "the click", () => { 
                Alert ( 'you click the DIV element!' ) 
            }, to false ); 

            document.getElementById ( 'myP2') the addEventListener (. " click ", () => {
                alert('You clicked P2 element! ' ) 
            }, To true ); 
            document.getElementById ( ' myDiv2 '.) The addEventListener ( "the Click", () => { 
                Alert ( ' DIV2 element you click '! ) 
            }, To true ); 
        } 
    };
 </ Script>

CSS

<style scoped type="text/css">
.home {
    margin-top: 200px;
    padding-left: 800px;
    padding-right: 800px;
}
#myDiv, #myDiv2{
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>