Binding of events

The difference between addEventListener and event binding on
    addEventListener can bind multiple identical events to an element and ensure that all events will be executed
    Multiple events bound with on are overwritten by the last event

Remove event binding: removeEventListener

Event capture and bubbling

Event capture refers to the node from document to trigger event, i.e. top-down event de triggering.
Instead, event bubbling is a bottom-up way to trigger events.
The third parameter of binding event method is to control whether the event triggering sequence is event capture.
true, event capture; false, event bubbling. The default is false, i.e. event bubbling.
Jquery's ev.stopPropagation()/ev.cancelBubble = true to prevent bubbling and prevent the event from bubbling. It means that up to now, the events of my parents and grandparents should not be triggered.

Example:
    <div class="box">
        <div class="mid">
            <div class="item"></div>
        </div>
    </div>
    <script type="text/javascript">
        var box = document.getElementsByClassName("box")[0];
        var mid = document.getElementsByClassName("mid")[0];
        var item = document.getElementsByClassName("item")[0];

        box.addEventListener("click",function(){
            console.log("Xiaoming's grandfather");
        },false);
        mid.addEventListener("click",function(){
            console.log("Xiaoming's father");
        },false);
        item.addEventListener("click",function(ev){
            console.log("Xiao Ming");
        },false);
    </script>

Result:
    Xiao Ming
    Xiaoming's father
    Xiaoming's grandfather
 Conclusion: the triggering sequence of events is from inside to outside, which is event bubbling.

        box.addEventListener("click",function(){
            console.log("Xiaoming's grandfather");
        },true);
        mid.addEventListener("click",function(){
            console.log("Xiaoming's father");
        },true);
        item.addEventListener("click",function(ev){
            console.log("Xiao Ming");
        },true);

Result:
    Xiaoming's grandfather
    Xiaoming's father
    Xiao Ming
 Conclusion: the event triggering sequence is changed to from outside to inside, which is event capture

Prevent events from bubbling

    item.addEventListener("click",function(ev){
        // Cancel bubbling, prevent the event from bubbling, prevent the event from bubbling
        1.ev.cancelBubble = true;
        2.stopPropagation();// 2

        // Compatible writing
        if (ev.stopPropagation) {
            ev.stopPropagation();
        } else {
            ev.cancelBubble = true;
        }


        console.log("Xiao Ming");

        // Block default events
        // ev.preventDefault();
        // ev.returnValue = false;
        // return false;
    },false);

Result:
    Xiao Ming
 Conclusion: when preventing the event from bubbling, only subclass events (nodes) will be triggered