当前位置：首页 > news >正文

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

news 2026/3/31 14:38:17

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

比如：

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>

运行结果如下：

核心错误：`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>

运行结果如下：

鼠标点击左侧对应的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>

运行结果如下：