javascript 面试题

最新推荐文章于 2023-12-15 17:11:24 发布

ly115176236

最新推荐文章于 2023-12-15 17:11:24 发布

阅读量2.8k

点赞数

分类专栏： javascript 文章标签： javascript function object html fun 文档

本文链接：https://blog.csdn.net/ly115176236/article/details/6629034

版权

javascript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

题在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保存了处罚自身的dom
					alert(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文档的编程接口