javascript 面试题

来源：互联网发布：淘宝大学和培训学校编辑：程序博客网时间：2024/05/16 16:01

题在body部分

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title></title><script type="text/javascript">/**方法一：基于dom属性window.onload = function(){var elements = document.getElementsByTagName("a");var LIB_addEventListener = function(element, type, func, i){element.addEventListener(type, func, false);element.setAttribute("i",i);}for (var i=0, ilen=elements.length; i<ilen; i++) {     var element = elements[i];     LIB_addEventListener(element, 'click', function(event) {   alert('I was originally number ' + this.getAttribute("i"));   },i+1);}}*//**方法二：evel不推荐使用，虽然强大，但效率低window.onload = function(){var elements = document.getElementsByTagName("a");var LIB_addEventListener = function(element, type, func){element.addEventListener(type, func, false);}for (var i=0, ilen=elements.length; i<ilen; i++) {     var element = elements[i];  eval("var f=function(event){alert('I was originally number "+i+"');}");  LIB_addEventListener(element, 'click', f);}}*//**方法三：基于闭包window.onload = function(){var elements = document.getElementsByTagName("a");var LIB_addEventListener = function(element, type, func){element.addEventListener(type, func, false);}for (var i=0, ilen=elements.length; i<ilen; i++) {     var element = elements[i];  var fun = function(){  var j = i;  return function(event){alert('I was originally number '+j)};  }  LIB_addEventListener(element, 'click', fun());}}*///方法四：基于event.target进行判断/**window.onload = function(){var elements = document.getElementsByTagName("a");var LIB_addEventListener = function(element, type, func){element.addEventListener(type, func, false);}for (var i=0, ilen=elements.length; i<ilen; i++) {   var element = elements[i];LIB_addEventListener(element, 'click', function(event){for(var i = elements.length; i > 0; i--){if(event.target === elements[i-1]){alert(i);}}});}}*///方法五：同方法三，都用的闭包/**window.onload = function(){var elements = document.getElementsByTagName("a");var LIB_addEventListener = function(element, type, func){element.addEventListener(type, func, false);}for (var i=0, ilen=elements.length; i<ilen; i++) {   var element = elements[i];LIB_addEventListener(element, 'click', (function(i){ return function(e){console.log(this)    //这里的this保存了处罚自身的domalert(i) };})(i));}}*//**方法六：同方法三，都用的闭包window.onload = function(){var elements = document.getElementsByTagName("a");var LIB_addEventListener = function(element, type, func){element.addEventListener(type, func, false);}for (var i=0, ilen=elements.length; i<ilen; i++) {     var element = elements[i];  var fun = function(){var j = i;return function(event){alert('I was originally number '+j)};  }  LIB_addEventListener(element, 'click', fun());}}*///方法七：同方法三，都用的闭包window.onload = function(){var elements = document.getElementsByTagName("a");var LIB_addEventListener = function(element, type, func){element.addEventListener(type, func, false);}for (var i=0, ilen=elements.length; i<ilen; i++) {     var element = elements[i];  LIB_addEventListener(element, 'click', (function(){var j = i;return function(event){alert('I was originally number '+j)};  })());}}</script></head><body>  <h1>给每个a绑定一个click事件，让每次click弹出对应的index</h1><a href="#1">1</a><a href="#2">2</a><a href="#3">3</a><a href="#4">4</a><a href="#5">5</a></body></html>

javascript 获取每个a链接对应的index。考察的内容有，dom元素、event.target、 closure

       作用域是每个变量的作用范围，闭包就是作用域链的产物，window是最高层的作用域，从它往下一层一层的分；

       作用域链就是从当前变量自身的作用域往上一直到window对象的作用域，在这个作用域链上的变量都可以被当前变量引用。

       原型可以理解为类，一个对象的原型相当于用来实例化它的类， javascript中所有的对象都是从Object对象派生的，所以Object对象在所有对象的原型链的最底部。

       dom elem原型链，在DOM标准中，每个HTML元素都是继承自HTMLElement，HTMLElement相当于Object，HTML的元素就是HTMLElement，也就是每个dom元素，都是Object，但是在ie中HTMLElement对象是隐藏的，代码访问不了。

       dom又称为文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口