题在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文档的编程接口