(精华)2020年6月25日 JavaScript高级篇 click事件(冒泡，捕获，委托)

冒泡和捕获

 <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");

 //绑定监听事件
 // function addEventHandler(target,type,fn,kind){
 //     var kindO = kind ? kind :false; //默认是冒泡
 //     if(target.addEventListener){
 //         target.addEventListener(type,fn,kindO);
 //     }else{
 //         // ie8以下
 //         target.attachEvent("on"+type,fn);
 //     }
 // }

 // addEventHandler(window,'click',function(e){
 //     console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
 // }, true)

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

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

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

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

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

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

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


 // // 冒泡阶段绑定的事件
 window.addEventListener("click", function(e){
     console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

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

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

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

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

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

 textSpan.addEventListener("click", function(e){
     e.stopPropagation();
     console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
 }, false);

委托

<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>

综合案例

<body>
    <div id="btnGroup">
        <button type="button" tag="beginBtn">开始洗衣服</button>
        <button type="button" tag="checkBtn">查看洗完没</button>
        <button type="button" tag="stopBtn">停止洗衣服</button>
    </div>
</body>
<script>
    //定义一个洗衣机 【CNF_练习题】
    //以下用到了封装功能
    var Washmachine = {
        //定义洗衣机是否在工作
        //  0: 未开始
        //  1：进行中
        //  2：已完成
        status: 0,
        begionAction: function (obj) {
            this.status = 1; //正在使用中了
            this.temp = 1;

            var objInit = {
                el: '#test',
                clothes: 10, //衣物
                powder: 10, //洗衣服
                Itime: 1000 //洗衣服时间
            }
            var lastObj = Object.assign({}, objInit, obj);

            console.log("正在洗衣服中...");

            this.timer = setInterval(function () {
                if (this.status == 1) {
                    this.temp++;
                } else if (this.status == 2) {
                    console.log("已完成洗衣服...");
                    clearInterval(this.timer);
                }
            }.bind(this), 1000)

            //关于作用域
            //方式一
            //  var _this = this;
            //  setTimeout(function(){this.status=2;},lastObj.Itime);

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

            //方式三：
            // setTimeout(()=>{
            //     this.status=2;   
            // },lastObj.Itime);

        },
        ViewResult: function () {
            if (this.status == 1) {
                console.log("洗衣机正在工作...");
                console.log("截止目前工作的时长" + this.temp);
            } else if (this.status == 2) {
                console.log("已完成洗衣服...");
                clearInterval(this.timer);
            }
        },
        stopWashing: function () {
            if (this.timer) {
                clearInterval(this.timer);
            }

        }
    }

    //  事件委托 ，就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果
    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>

(精华)2020年6月25日 JavaScript高级篇 click事件(冒泡，捕获，委托)

冒泡和捕获

委托

综合案例

猜你喜欢