queryselector和queryselectorall的区别

  Msg.prototype._show = function(el,overlay) {
    document.body.append(el);
    document.body.append(overlay);

    setTimeout(function() {
      el.style.transform = 'translate(-50%, -50%) scale(1, 1)';
      overlay.style.opacity = '1';
    });
  }

  Msg.prototype._bind = function([el,overlay]){
    const _this = this
    const hideMsg = (e) =>{
       el.style.transform = 'translate(-50%, -50%) scale(0, 0)';
       overlay.style.opacity = '0';

       setTimeout(function(){
         document.body.removeChild(el)
         document.body.removeChild(overlay)
       })


    }

    const cancel =(e) =>{
      _this.cancel && _this.cancel.call(_this,e) 
      console.log("TCL: cancel -> _this.cancel", _this.cancel)
      hideMsg()
    }

    const confirm =(e) =>{
      this.confirm && _this.confirm.call(_this,e)
      hideMsg()
    }

    overlay.addEventListener('click',function(){
      hideMsg()
    })

    el.querySelector('span.msg-header-close-button').addEventListener('click',function(){
      hideMsg()
    });

    el.querySelector('.msg-footer-cancel-button').addEventListener('click',function(){
      cancel()
    });

    el.querySelector('.msg-footer-confirm-button').addEventListener('click',function(){
      confirm()
    });

    // let all = el.querySelectorAll('.msg-footer-confirm-button,.msg-footer-cancel-button,span.msg-header-close-button')
    // all.forEach((item)=> {
    //   item.addEventListener('click',()=>{
    //     hideMsg()
    //   })
    // });

    // el.querySelector('.msg-footer').addEventListener('click',function(){
    //   hideMsg()
    // });
  }

注意注释部分，其实和上面作用一样，注意queryselectorall返回的是一个数组，要接着遍历才行