JavaScript--direct function call and event call

<!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>

write picture description here

problem analysis

//当页面加载完以后，相当于执行完了循环，当点击的时候，i已经变成了4，所以会报错
for(var i=0; i<aLi.length; i++){
        aLi[i].onclick = function(){
            alert(aLi[i].innerHTML);//报错
        }
    }

//因为this在fn1中，此时的this指向windows
for(var i=0; i<aLi.length; i++){
        aLi[i].onclick = function(){}
        aLi[i].onclick = fn1;
    }
    function fn1(){
        alert(this);
    }

write picture description here
3.

for(var i=0; i<aLi.length; i++){
        aLi[i].onclick = fn1();
        //会直接弹4次，相当于把fn1执行了四次的一个结果返回给了onclick，此时点击无效果
    }
    function fn1(){
        alert(1);
    }

JavaScript--direct function call and event call

problem analysis

Guess you like