事件中的this

Posted 2020-12-03 qiweile

现阶段来说，在事件中使用this与直接使用事件源效果相同；

一面代码片段：

　　　　　　<ul>

        　　　　　　<li>这是li1</li>

       　　　　　　 <li>这是li2</li>

        　　　　　　<li>这是li3</li>

        　　　　　　<li>这是li4</li>

        　　　　　　<li>这是li5</li>

        　　　　　　<li>这是li6</li>

　　　　　　</ul>

var lis = document.getElementsByTagName(‘li‘);

for(var i=0;i<lis.length;i++){

　　lis[i].onclick = function(){

　　　　console.log(lis.[i].innerText);//此时如果这样打印的话会报错；

　　　　console.log(this.innerText);//我们发现这种打印方式打印的内容正是我们想要的；

　　}

}

 

原因：当页面加载完毕后for循环就开始执行了，而事件只是进行里设置，

不点击是不会执行的，这意味着 i 并没有取值；当点击时循环早已结束，

这时 i 的取值只能是 lis.length；

 

总结：

1、循环添加事件时，事件内部不要使用循环变量。

2、推荐事件内部能用this，就一定要用this代替事件源。