聊一聊事件委托

URLOS 发布于2019-08-26 11:38 / 974人阅读

摘要：今天想使用点击事件绑定动态获取的元素，但又不想将事件注册在成功函数体内。

今天想使用点击事件绑定动态获取的元素，但又不想将事件注册在post成功函数体内。

事件委托，顾名思义就是讲子元素事件委托给上级元素
（这是写上级元素，包含document根元素，因为不局限于它的父元素）

先说一下为什么动态获取的元素直接绑定不可以：

  因为动态元素是后生成的，在事件注册的时候，它还没有生成，一般
我们是通过：
$.post(url,function(data){
    //这里拿到data，然后去插入节点，生成元素
    //如果我们要在这里注册事件，当然没问题，直接绑定即可，
    //因为现在元素已经生成了
})

很不幸，基于业务的复杂性，必须要将改事件抽出来，注册到全局（因为要做多一层缓存）

既然要在元素未生成前，注册事件，那么将该事件绑定给上级元素：
$(documnet).on("click","要绑定的事件元素", function(){
    // to do
})

说一下为什么要这样做：

我在做一个优惠券功能，优惠券有使用和未使用的区别，那么就有这样一个需求：
点击使用：去请求使用的；
点击未使用：去请求未使用的；

我不可能每点击一次都去请求一次吧，我希望我请求过了的数据，就不希望它再请求了

这里就要加一个缓存给它，设两个变量，分别保存使用和未使用的，
点击它的时候，只要对应的变量不为空，就直接渲染，为空就去请求
    var willData, doneData, state;
function session(){
    //state是用来判断点击的是已使用还是未使用的，忽略即可
  if(state == 0) {
    if(willData) {
      $("#coupon-box").append(willData)
    } else {
      $.post(url,function(){
          $("绑定事件元素").on(function(){})
      })
    }
  } else {
    if(doneData) {
      $("#coupon-box").append(doneData)
    } else {
      $.post(url,function(){
          $("绑定事件元素").on(function(){})
      })
    }
  }
}

写完逻辑后，（如果是在post函数体注册的事件）就会发现一个很奇怪的问题

当激活缓存，去插入元素时，发现点击事件失效了；
因为我是通过移除remove（）和append（）再插入去切换使用和未使用的，
所以已经通过post绑定的元素，被我移除了，通过session去插入的元素并
没有注册点击事件，当然我们也可以在给它注册一次，毕竟要提高代码重用
所以这里用了事件委托：
$("上级元素").on("click","绑定元素",function(){

})

=====本文到此结束，代码比较少，最重要的是思路，对于刚入门的小伙伴可以看一看哈！

GPU云服务器云服务器聊一聊来聊一聊聊一聊去抖聊一聊java内存

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107284.html

聊一聊前端的监控

摘要：今天我们来聊聊前端的监控我们为什么需要前端监控为了获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化方向前端监控分为三类性能项目数据监控异常监控性能监控衡量前端的性能的指标是时间那么如何监测时间呢，浏览器给我们提今天我们来聊聊前端的监控我们为什么需要前端监控？为了获取用户行为以及跟踪产品在用户端的使用情况，并以监控数据为基础，指明产品优化方向前端监控...

Pikachu 2019-08-23 15:16 评论0 收藏0
[聊一聊系列]聊一聊WEB前端安全那些事儿

摘要：所以今天，就和大家一起聊一聊前端的安全那些事儿。我们就聊一聊前端工程师们需要注意的那些安全知识。殊不知，这不仅仅是违反了的标准而已，也同样会被黑客所利用。欢迎大家收看聊一聊系列，这一套系列文章，可以帮助前端工程师们了解前端的方方面面（不仅仅是代码）：https://segmentfault.com/blog... 随着互联网的发达，各种WEB应用也变得越来越复杂，满足了用户的各种需求...

AZmake 2019-06-21 16:29 评论0 收藏0
JavaScript 五十问——认真聊一聊去抖与节流

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔...

chadLi 2019-08-02 14:05 评论0 收藏0
JavaScript 五十问——认真聊一聊去抖与节流

摘要：前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔而去抖动会指定事件不触发的时间间隔。前言无论是面试还是在讨论浏览器优化过程中，都会涉及到去抖动和节流的问题。总的来说，这二者是一种限制事件触发频率的方式。不同的是，节流会指定事件触发的时间间隔；而去抖动会指定事件不触发的时间间隔...

EscapedDog 2019-08-23 14:38 评论0 收藏0
前端性能优化JavaScript篇

摘要：减少作用域链上的查找次数。尽量少用全局变量，尽量使用局部变量。全局变量如果不手动销毁，会一直存在，造成全局变量污染，可能很产生一些意想不到的错误，而局部变量运行完成后，就被会被回收使用代替大量的内联样式修改。性能优化还需要继续深入研究。关于前端性能优化的讨论一直都很多，包罗的知识也很多，可以说性能优化只有更好，没有最好。前面我写了一篇关于css优化的总结文章，今天再从javascri...

chuyao 2019-08-30 15:55 评论0 收藏0