JavaScript:函数应用的几个细节问题

一、以函数调用的形式进行赋值操作的情况

比如：

ele.onclick = HTML();

先看一下具体的代码情况，如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
</head>

<body>
    <h1 id='h1'>1</h1>
    <h1 id='h2'>2</h1>
    <h1 id='h3'>3</h1>

    <script>
        
        function csHTML(ele) {
            console.log(ele.innerHTML);
        }

        function HTML() {
            // console.log(this.innerHTML);
            console.log('123');
        }
        var h1coll = document.getElementsByTagName('h1');
        for (var i = 0; i < h1coll.length; i++) {
            var ele = h1coll[i];
            //一个错误的示范  这样叫方法调用HTML()
            ele.onclick = HTML();

            // ele.onclick = function() {
            //     console.log(this.innerHTML);
            // }

        }
    </script>
</body>

</html>

运行结果如下：

image

核心错误：ele.onclick = HTML()

 
这是这段代码最关键的错误。
 
  • HTML() 是函数调用，代码执行到这一行时会立刻执行HTML()函数，并把函数的返回值（这里是undefined）赋值给ele.onclick。
  • 这意味着：页面加载时就会打印 3 次123，而点击<h1>元素时不会有任何反应（因为onclick被赋值成了undefined）。
  • 正确的事件绑定方式是：ele.onclick = HTML; 
  • <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
</head>

<body>
    <h1 id='h1'>1</h1>
    <h1 id='h2'>2</h1>
    <h1 id='h3'>3</h1>

    <script>
        
        function csHTML(ele) {
            console.log(ele.innerHTML);
        }

        function HTML() {
            console.log(this.innerHTML);
            // console.log('123');
        }
        var h1coll = document.getElementsByTagName('h1');
        for (var i = 0; i < h1coll.length; i++) {
            var ele = h1coll[i];
            //这才是正确的方式
            ele.onclick = HTML;

            // ele.onclick = function() {
            //     console.log(this.innerHTML);
            // }

        }
    </script>
</body>

</html>

运行结果如下：

image

鼠标点击左侧对应的1-2-3数字，右侧的控制台就会输出相应的点击对象的值；

  • 函数引用 vs 函数调用：
    • ele.onclick = HTML：把HTML函数本身赋值给onclick事件，点击元素时才会执行这个函数（这是事件绑定的正确方式）。
    • ele.onclick = HTML()：立刻执行HTML()函数，把返回值（undefined）赋值给onclick，点击元素无反应。
     
  • this 的指向：在事件处理函数中，this默认指向触发事件的 DOM 元素（这里就是被点击的<h1>），所以this.innerHTML能拿到<h1>里的内容（1/2/3）。

二、匿名函数进行赋值的情况

继续将上述代码稍微改造一下，如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>W3Cschool教程(w3cschool.cn)</title>
</head>

<body>
    <h1 id='h1'>1</h1>
    <h1 id='h2'>2</h1>
    <h1 id='h3'>3</h1>

    <script>
        
        function csHTML(ele) {
            console.log(ele.innerHTML);
        }

        function HTML() {
            console.log(this.innerHTML);
            // console.log('123');
        }
        var h1coll = document.getElementsByTagName('h1');
        for (var i = 0; i < h1coll.length; i++) {
            var ele = h1coll[i];
            //这才是正确的方式
            // ele.onclick = HTML;

            ele.onclick = function() {
                console.log(123456);
            }

        }
    </script>
</body>

</html>

运行结果如下：

image

点击左侧数字，右侧控制台就会输出123456，多次点击就会计数，如上所示，共点击了四次；

 

posted @ 2026-01-24 13:25  chenlight  阅读(3)  评论(0)    收藏  举报