<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>我是LI 1</li>
<li>我是LI 2</li>
<li>我是LI 3</li>
<li>我是LI 4</li>
</ul>
</body>
</html>
<script type="text/javascript">
/*
函数
function(){}匿名函数
function fn1(){}命名函数 fn1J就是函数名
函数不调用就不会执行
函数的调用
1.事件调用
比如:
1.aLi[0].onclick = function(){}
2.aLi[i].onclick = fn1;
2.直接调用
函数名+(); 就会直接调用,不管在哪个位置,只要函数名+()就会执行
this
谁触发的事件我就是谁
1.事件调用时,this指的就是事件前面的对象‘
2.直接调用的时候,this永远指的是window
*/
var aLi = document.getElementsByTagName("li");
//当页面加载完以后,相当于执行完了循环,当点击的时候,i已经变成了4,所以会报错
for(var i=0; i<aLi.length; i++){
aLi[i].onclick = function(){
alert(this.innerHTML);
alert(aLi[i].innerHTML);
//当页面加载完以后,相当于执行完了循环,当点击的时候,i已经变成了4,所以会报错
}
//aLi[i].onclick = fn1;
//aLi[i].onclick = fn1();
//会直接弹4次,相当于把fn1执行了四次的一个结果返回给了onclick,此时点击无效果
}
//fn1();
//function fn1(){
//alert(this);
//alert(1);
//}
</script>
问题分析
1.
//当页面加载完以后,相当于执行完了循环,当点击的时候,i已经变成了4,所以会报错
for(var i=0; i<aLi.length; i++){
aLi[i].onclick = function(){
alert(aLi[i].innerHTML);//报错
}
}
2.
//因为this在fn1中,此时的this指向windows
for(var i=0; i<aLi.length; i++){
aLi[i].onclick = function(){}
aLi[i].onclick = fn1;
}
function fn1(){
alert(this);
}
3.
for(var i=0; i<aLi.length; i++){
aLi[i].onclick = fn1();
//会直接弹4次,相当于把fn1执行了四次的一个结果返回给了onclick,此时点击无效果
}
function fn1(){
alert(1);
}