发布于 2017-05-25 23:36:45 | 243 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要给大家介绍了一道关于闭包bind、this的面试题,文中给出了详细的示例代码,需要的朋友可以参考借鉴,下面来一起看看吧。

要解决的问题是针对下面这个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();

总结

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



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务