分享一道关于闭包、bind和this的面试题


Posted in Javascript onFebruary 20, 2017

要解决的问题是针对下面这个ul,为每一个li添加一个点击事件,弹出对应的index

<ul id="text">
 <li>这是第一个li</li>
 <li>这是第二个li</li>
 <li>这是第三个li</li>
</ul>

解答一:bind,将当前匿名函数指向this,将i当参数传入

var init = function(){
var obj = document.getElementById('text');
for(var i=0;i<obj.children.length;i++){
 obj.children[i].addEventListener('click',function(i){
 alert(i)
 }.bind(this,i))
}
}
init();

解答二:闭包

var init = function(){
var lis=document.querySelectorAll("#text li");
 for(var i=0;i<lis.length;i++){
 lis[i].onclick=(function(i){
  return function(){
   alert(i);
  };
 })(i)
 }
}
init();

解答三:最笨的方法,匹配

var init = function(){
 var obj = document.getElementById('text');
 for(var i=0;i<obj.children.length;i++){
 obj.children[i].addEventListener('click',function(item){
 var self = item.target;
 for(var j=0;j<obj.children.length;j++){
 if(self == obj.children[j]){
  alert(j);
 }
 }
 })
 }
}
init();

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery 中DOM 操作详解
Jan 13 Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 jQuery
轻松理解vue的双向数据绑定问题
Oct 30 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
nginx部署访问vue-cli搭建的项目的方法
Feb 12 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
Paypal支付不完全指北
Jun 04 Javascript
vue-openlayers实现地图坐标弹框效果
Sep 24 Javascript
原生JS实现跑马灯效果
Feb 20 #Javascript
js 实现省市区三级联动菜单效果
Feb 20 #Javascript
js事件冒泡与事件捕获详解
Feb 20 #Javascript
关于ES6的六个小特性(二)
Feb 20 #Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 #Javascript
JS批量替换内容中关键词为超链接
Feb 20 #Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 #Javascript
You might like
SONY ICF-SW7600的电路分析
2021/03/02 无线电
解决php表单重复提交实现方法
2015/09/29 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
PHP强制转化的形式整理
2020/05/22 PHP
JavaScript 三种不同位置代码的写法
2009/10/25 Javascript
jquery更换文章内容与改变字体大小代码
2013/09/30 Javascript
在JavaScript中使用timer示例
2014/05/08 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
js实现单张图片平移切换效果
2017/10/11 Javascript
vue+element实现打印页面功能
2019/05/20 Javascript
如何在JavaScript中谨慎使用代码注释
2019/06/21 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
使用python实现语音文件的特征提取方法
2019/01/09 Python
Python异常处理知识点总结
2019/02/18 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
劳动之星获奖感言
2014/02/01 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
个人求职信范文
2014/05/24 职场文书
房屋出售授权委托书
2014/10/12 职场文书
幼儿园小班工作总结2015
2015/04/25 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
商业计划书范文
2019/04/24 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
python实现Thrift服务端的方法
2021/04/20 Python
Python 如何安装Selenium
2021/05/06 Python
python调试工具Birdseye的使用教程
2021/05/25 Python