javascript 事件流的应用之 addEventListener

Posted 【云】风过无痕

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 事件流的应用之 addEventListener相关的知识，希望对你有一定的参考价值。

原始需求：防止按钮短时间内高频率触发点击事件，由于重复提交导致的业务异常。

图：

 

demo：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <style media="screen">
      .forbidden button{
        cursor: not-allowed;
      }
    </style>
  </head>
  <body>
    <h5>3秒内的多次点击只生效一次（基于事件拦截）</h5>
    <div class="button-group">
      <button class="link-button" onclick="randomNum()">random</button>
      随机数：<span id="random_num"></span>
    </div>
  </body>
  <script type="text/javascript">
  /* 初始化禁用绑定 */
  document.querySelector(\'.link-button\').addEventListener(\'click\',forbiddenButton,true);

  function randomNum(){
    document.querySelector(\'#random_num\').innerHTML = Math.random();
  }

  var forbiddenTimer;
  function forbiddenButton(){
    var pNode = this.parentNode;
    pNode.classList.add(\'forbidden\');
    pNode.addEventListener(\'click\',function(e){
      if(Array.from(this.classList).includes(\'forbidden\')) e.stopPropagation();
      _clearTimer();
    },true);
    _clearTimer();

    function _clearTimer(){/* 3秒之后取消禁用状态 */
      if(forbiddenTimer) clearTimeout(forbiddenTimer);
      forbiddenTimer = setTimeout(function(){
        pNode.classList.remove(\'forbidden\');
      },3000);
    }
  }
  </script>
</html>

 

addEventListener事件拦截参考：https://www.cnblogs.com/Andyudd/p/5583563.html

 

以上是关于javascript 事件流的应用之 addEventListener的主要内容，如果未能解决你的问题，请参考以下文章

深入理解JavaScript系列（44）：设计模式之桥接模式

整理之DOM事件阶段冒泡与捕获事件委托ie事件和dom模型事件鼠标事件

even fluent

JS之事件

画布上的JavaScript事件在手机上

JavaScript addEvent函数