JS动态添加元素及绑定事件造成程序重复执行解决


Posted in Javascript onDecember 07, 2017

前言

本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function () {})这样的代码造成的程序重复执行,很多人在文章里写到了,也说了用off方法来解绑,但都未能点出问题的本质,几乎都忽略了问题的本质其实是事件委托造成的。

话不多说,上点天天看到的代码:

第一种:  

$(document).on('click', function (e) {
 consol.log('jquery事件绑定')
 });

第二种:  

document.addEventListener('click',function (e) {
 consol.log('原生事件绑定')  
 });

第三种:  

var id = setInterval(function () {
 console.log('定时器循环事件绑定')
 },1000);

上面的代码,相信不少同盟,天天都会写到,看似简单的事件绑定,却经常能给我们带来意想不到的结果,特别是在这个SPA,应用AJAX页面局部刷新如此盛行的时代。

那什么是事件绑定,造成的程序重复执行呢?这个事情要说清除,好像不是那么简单,还是用一段测试代码来说明吧。你可以拷贝到本地,自己试试: 

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<button class="add_but">点击</button>
<div id="point">fdfsdf
</div>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script> 
<script>
 var count=1;
 var example = {
 getData:function () {
  var data ={
  content:'df'+count++,
  href:''
  };
  this.renderData(data);
 },
 renderData:function (data) {
  document.getElementById('point').innerHTML='<div>this is a '+data.content+'点此<a class="read-more" href="javasript:;" rel="external nofollow" rel="external nofollow" >查看更多</a></div>';
  $('#point').on('click','.read-more',function () {
  alert('事故发生点');
 })
/*  setInterval(function () {
  console.log('fdfdfg');
  },2000);*/
  /*用冒泡来绑定事件,类似于Jquery的on绑定事件*/
 /* document.querySelector('body').addEventListener('click',function (e) {
  if(e.target.classList.contains('read-more')){
   alert('事故发生点');
  }
  })*/

 }
 } ;
 document.querySelector('.add_but').addEventListener('click',function (e) {
 example.getData();
 e.stopImmediatePropagation();
 });
</script>
</body>
</html>

以上是我为说清这个事情写的一段测试代码,可以拷贝下来试试。当我们点击页面的按钮,触发调用example.getData()这个函数,模拟ajax获取数据成功后,就会根据局部刷新页面内元素类名为point的内容,同时会为加载这个内容中的read-more A标签绑定一个事件,就这样我们想要的效果出现啦,当元素第一次加载时,页面正常,‘事故发生点'弹出一次,当二次刷新触发后,你会发现其弹出了两次,当第三次时,你会发现,其弹三次,以此类推。。。。

OMG,这个程序到底怎么了,我明明每次事件绑定前,前面绑定的元素都删除了,为什么,被删除的尸体感觉还在动作,好吧,上面就是我第一次遇到这个情况发出的感叹。

最后是问身边的大神,才突然领悟,原来绑定一直都在,而这个绑定被保存在一个叫做事件队列的地方,他不在循环执行的主线程中,画了一张需要默契才能看懂的图,勉强看一看。

JS动态添加元素及绑定事件造成程序重复执行解决

事件队列

还原真相

其实上面那一段代码是为了测试而特意写的代码,除了定时器外,其他两个点击事件换个正常的写法,重复执行的情况是不会出现的,正常的代码:  

// jquery 事件直接绑定的写法;
 $('#point .read-more').on('click',function () {
  alert('事故发生点');
 })
 // 原生JS 事件直接绑定的写法;
 document.querySelector('.read-more').addEventListener('click',function (e) {
  alert('事故发生点');
 })

看出差别了吗?其实就是不用冒泡来事件委托,而是直接给添加的元素绑定事件。所以Dom事件是讲道理的,动态添加的元素,再动态为此绑定事件,待元素被删除后,与其绑定的相应事件其实是会从事件绑定队列中删除的,而非如上面测试代码,给人的感觉是元素移除后,但其绑定的事件还在内存中。但请记住,这是个误会,上面测试的代码之所以给人这种错觉,是因为我们并没有为动态添加的元素绑定事件,而仅仅是用了事件委托的形式,实际上事件是绑定在#point元素上的,其一直存在,利用事件冒泡来让程序知道我们点击了动态添加的链接元素。测试中特意用原生js去重现了这次事件委托,jquery的on绑定事件其实原理基本相同。  

document.querySelector('body').addEventListener('click',function (e) {
 if(e.target.classList.contains('read-more')){
  alert('事故发生点');
 }
})

解除bug的那些方法

定时器

这个是最易犯的错误,当然也是最易解的错误,因为设定定时器时,其会返回一个数值,这个数值应该是事件队列此定时器中的一个编号吧,类似于9527;步骤就是设定一个全局变量来保持这个返回值id,在每次设定定时器时,先通过id清除已经设定过的定时器    

clearInterval(intervalId); //粗暴的写法
 intervalId&&clearInterval(intervalId); //严谨的写法
 intervalId=setInterval(function () {
  console.log('fdfdfg');
  },2000);

Dom事件

其实上面我们已经说过,最直接的办法就是不采用事件委托,而是采用直接绑定;如果确实要用事件委托来绑定事件,那就是解绑。在jquery中提供了unbind函数来解绑事件,不过在jquery 1.8版本以后,这个方法已经不推荐了,而是推荐off方法。比如上面的on事件委托的方式,要解绑,可采用语句$('#point').off('click','.read-more')

有缺陷的解决方案,添加flag

很好理解,第一次绑定后,flag置位,下一次在执行这个绑定时,程序就知道在这个节点上已经有了绑定,无需再添加,具体操作就是:  

var flag = false;
 var example = {
 getData: function () {
  var data = {
  content: 'df' + count++,
  href: ''
  };
  this.renderData(data);
 },
 renderData: function (data) {
  document.getElementById('point').innerHTML = '<div>this is a ' + data.content + '点此<a class="read-more" href="javasript:;" rel="external nofollow" rel="external nofollow" >查看更多</a></div>';
  !flag && $('#point').on('click', '.read-more', function () {
  alert('事故发生点'+data.content);
  });
  flag = true;
 }
 };

从逻辑上,看起来没有问题,但仔细观察,发现这是有问题的。当我们第二次,第三次刷新时,弹出框的内容还是和第一次模拟刷新后点击后弹出的内容一致,还是'事故发生点df1',而非和内容一样递增,为什么呢,感觉事件队列里面的回调函数被单独保存起来了,data被深拷贝了,而不再是一个引用。确实有点难理解,我也不知道到底是为什么,如果哪位能说清楚,还请一定告知。

结个尾写在最后,其实平常写一些程序时,事件绑定,造成程序重复执行这些情况很少发生,其通常会出现在我们写插件的时候,插件需要适应多种调用环境,所以在插件内部做到防止事件重复绑定的情况非常重要。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jquery的live使用注意事项
Feb 18 Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
JQuery导航菜单选择特效
Apr 11 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
Apr 01 Javascript
vue嵌套路由与404重定向实现方法分析
May 04 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 #Javascript
jquery学习笔记之无new构建详解
Dec 07 #jQuery
利用Node.js检测端口是否被占用的方法
Dec 07 #Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 #Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 #Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 #Javascript
react学习笔记之state以及setState的使用
Dec 07 #Javascript
You might like
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php轻松实现中英文混排字符串截取
2014/05/28 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
php实现获取农历(阴历)、节日、节气的类与用法示例
2017/11/20 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
js网页滚动条滚动事件实例分析
2015/05/05 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
Python自动化开发学习之三级菜单制作
2017/07/14 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python通过paramiko远程下载Linux服务器上的文件实例
2018/12/27 Python
python 调用有道api接口的方法
2019/01/03 Python
Series和DataFrame使用简单入门
2019/11/13 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
Fanatics英国官网:美国体育电商
2018/11/06 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
演讲稿的写法
2014/05/19 职场文书
经营理念标语
2014/06/21 职场文书
黄山导游词
2015/01/31 职场文书
2015年试用期自我评价范文
2015/03/10 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
五年级作文之学校的四季
2019/12/05 职场文书