Bubble and capture

 <div id="wrapDiv">wrapDiv
     <p id="innerP">innerP
         <span id="textSpan">textSpan</span>
     </p>
 </div>

 <script>
 var wrapDiv = document.getElementById("wrapDiv");
 var innerP = document.getElementById("innerP");
 var textSpan = document.getElementById("textSpan");

 // Bind listener events
 // function addEventHandler(target,type,fn,kind){
 // var kindO = kind ? kind :false; // Bubbles by default
 // if(target.addEventListener){
 // target.addEventListener(type,fn,kindO);
 // }else{
 // // Ie8 below
 // target.attachEvent("on"+type,fn);
 / /}
 // }

 // addEventHandler(window,'click',function(e){
 // console.log("window capture ", e.target.nodename, e.currenttarget.nodename);
 // }, true)

 window.addEventListener("click".function(e){
     console.log("Window capture", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 document.addEventListener("click".function(e){
     console.log("The document capture", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 document.documentElement.addEventListener("click".function(e){
     console.log("DocumentElement capture", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 document.body.addEventListener("click".function(e){
     console.log("The body to catch", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 wrapDiv.addEventListener("click".function(e){
     console.log("WrapDiv capture", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 innerP.addEventListener("click".function(e){
     console.log("InnerP capture", e.target.nodeName, e.currentTarget.nodeName);
 }, true);

 textSpan.addEventListener("click".function(e){
     console.log("TextSpan capture", e.target.nodeName, e.currentTarget.nodeName);
 }, true);


 // // Events bound to the bubble phase
 window.addEventListener("click".function(e){
     console.log("The window" bubble., e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 document.addEventListener("click".function(e){
     console.log("Document" bubble., e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 document.documentElement.addEventListener("click".function(e){
     console.log("DocumentElement bubbling", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 document.body.addEventListener("click".function(e){
     console.log("Body" bubble., e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 wrapDiv.addEventListener("click".function(e){
     console.log("WrapDiv bubbling", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 innerP.addEventListener("click".function(e){
     console.log("InnerP bubbling", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

 textSpan.addEventListener("click".function(e){
     e.stopPropagation();
     console.log("TextSpan bubbling", e.target.nodeName, e.currentTarget.nodeName);
 }, false);
Copy the code

entrust

<ul id="list">
    <li id="item1">item1</li>
    <li id="item2">item2</li>
    <li id="item3">item3</li>
</ul>
<script>
    var item1 = document.getElementById("item1");
    var item2 = document.getElementById("item2");
    var item3 = document.getElementById("item3");

    document.addEventListener("click".function (event) {
        var target = event.target;
        switch (target.id) {
            case 'item1':
                console.log('item1');
                break;
            case 'item2':
                console.log('item1');
                break;
            case 'item3':
                console.log('item1');
                break; }})</script>
Copy the code

Integrated case

<body>
    <div id="btnGroup">
        <button type="button" tag="beginBtn">Start doing laundry</button>
        <button type="button" tag="checkBtn">Check to see if you're done</button>
        <button type="button" tag="stopBtn">Stop doing laundry</button>
    </div>
</body>
<script>
    // Define a washing machine
    // Use the encapsulation function
    var Washmachine = {
        // Define whether the washing machine is working
        // 0: not started
        // 1: in progress
        // 2: completed
        status: 0.begionAction: function (obj) {
            this.status = 1; // It is in use now
            this.temp = 1;

            var objInit = {
                el: '#test'.clothes: 10./ / clothes
                powder: 10./ / doing the laundry
                Itime: 1000 // Laundry time
            }
            var lastObj = Object.assign({}, objInit, obj);

            console.log("In the laundry...");

            this.timer = setInterval(function () {
                if (this.status == 1) {
                    this.temp++;
                } else if (this.status == 2) {
                    console.log("Laundry done...");
                    clearInterval(this.timer);
                }
            }.bind(this), 1000)

            // About scope
            / / way
            // var _this = this;
            //  setTimeout(function(){this.status=2;},lastObj.Itime);

            2 / / way
            setTimeout(function () {
                this.status = 2;
            }.bind(this), lastObj.Itime);

            // Method 3:
            // setTimeout(()=>{
            // this.status=2;
            // },lastObj.Itime);

        },
        ViewResult: function () {
            if (this.status == 1) {
                console.log("The washing machine is working...");
                console.log("How long have you worked so far?" + this.temp);
            } else if (this.status == 2) {
                console.log("Laundry done...");
                clearInterval(this.timer); }},stopWashing: function () {
            if (this.timer) {
                clearInterval(this.timer); }}}// Event delegate, which uses the bubbling principle to add events to parent or ancestor elements, triggers the execution effect
    document.getElementById('btnGroup').addEventListener('click'.function (ev) {
        var target = ev.target;
        var tag = target.getAttribute('tag');
        switch (tag) {
            case 'beginBtn':
                Washmachine.begionAction({
                    Itime: 10000
                });
                break;
            case 'checkBtn':
                Washmachine.ViewResult();
                break;
            case 'stopBtn':
                Washmachine.stopWashing()
                break}})</script>
Copy the code