事件相关的优化

事件相关的优化

大部分的事件触发依赖于用户与浏览器的交互，但用户的行为是不可控的，许多交互设计上的缺陷与无法考虑到的因素会导致事件的频繁触发。

 

当事件处理器内部包含大量的操作，又不需要如此快速的响应事件时，就需要采用一些手段来限制事件处理器的执行。

 

事件的优化主要有两个目的：

 

减少不必要的 HTTP 请求

减少本机性能的消耗

1. 交互设计

通过交互的设计来优化事件是最常用到的方式。

 

如用户点击删除后将按钮禁止。

 

实例演示

预览

复制

<style>

  .list .item {display: flex;justify-content: space-between;border-bottom: 1px dashed #4caf50;padding: 8px 0;}

  .list .item .caption {font-weight: 700;}

  .list .item .operates .delete {border: 1px solid rgb(177, 107, 107);color: rgb(207, 72, 72);outline: none;cursor: pointer;}

</style>

 

<div class="list">

  <div class="item">

    <div class="content caption">

      今天要做的事情

    </div>

    <div class="operates caption">

      操作

    </div>

  </div>

 

  <div class="item">

    <div class="content">

      吃火锅

    </div>

    <div class="operates">

      <button class="delete">删除</button>

    </div>

  </div>

 

  <div class="item">

    <div class="content">

      和小姐姐聊天

    </div>

    <div class="operates">

      <button class="delete">删除</button>

    </div>

  </div>

</div>

 

<script>

  var listEle = document.querySelector('.list');

  var deleteEle = document.querySelectorAll('.delete');

 

  deleteEle.forEach(function(el) {

    el.addEventListener('click', function() {

      console.log('开始删除...');

 

      setTimeout(function() {

        var itemEl = el.parentNode.parentNode;

 

        listEle.removeChild(itemEl);

 

        console.log('删除成功');

      }, 1500);

    });

  });

</script>

<style>

  .list .item {display: flex;justify-content: space-between;border-bottom: 1px dashed #4caf50;padding: 8px 0;}

  .list .item .caption {font-weight: 700;}

  .list .item .operates .delete {border: 1px solid rgb(177, 107, 107);color: rgb(207, 72, 72);outline: none;cursor: pointer;}

</style>

 

<div class="list">

  <div class="item">

    <div class="content caption">

      今天要做的事情

    </div>

    <div class="operates caption">

      操作

    </div>

  </div>

 

  <div class="item">

    <div class="content">

      吃火锅

    </div>

    <div class="operates">

      <button class="delete">删除</button&