一、以函数调用的形式进行赋值操作的情况
比如：
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>运行结果如下：
点击左侧数字，右侧控制台就会输出123456，多次点击就会计数，如上所示，共点击了四次；
