element.onclick = fun与element onclick=fun()的区别
原本標題是：element.onclick = fun與<element οnclick="fun()">的區(qū)別，但是提示含有非法字符。
問題背景：
在看this指向的時候看到了這個，有的時候通過給DOM元素綁定監(jiān)聽事件，來觸發(fā)某些事件處理函數(shù)(如點擊當(dāng)前元素時修改該元素樣式等)，如果綁定的監(jiān)聽函數(shù)里面用到了this，上面兩種方式可能會有不同的效果。
試驗代碼：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>區(qū)別onclick不同綁定方式</title> </head> <body> <div id="div1" style="width: 80px;height: 80px" >DIV1,點擊觸發(fā)更改顏色</div> <div id="div2" style="width: 80px;height: 80px" onclick="changeBackground2()">DIV2,點擊觸發(fā)更改顏色</div> <script>//this指向當(dāng)前元素，本質(zhì)是調(diào)用對象里面的方法div1.onclick = changeBackground1;function changeBackground1(){console.log(this);this.style.color = '#cc0000';}//this指向window對象,本質(zhì)是調(diào)用了嵌套函數(shù)，先調(diào)用onclick()，再調(diào)用changeBackground()//嵌套函數(shù)中的this要么指向window(非嚴格模式)要么undefined(嚴格模式)function changeBackground2() {console.log(this);this.style.color = '#cc0000'; //TypeError:color undefined} </script> </body> </html>試驗結(jié)果：
可以很明顯的看到，第一種方式達到了想要的效果，第二種方式直接報錯了。通過控制臺打印的內(nèi)容和報的錯能夠分析出基本原因，this指向不同，第一個指向了div元素(div1)，顏色修改成功，第二個指向了window對象，找不到color屬性報錯。為什么this的指向會不一樣？
原因分析：
1.copying
element.onclick = doSomething;這個實際上是把doSomthing這個函數(shù)復(fù)制一份給了element的onclick屬性，因此觸發(fā)點擊事件時，this指向的是運行時調(diào)用它的對象element。原解釋：The function is copied in its entirety to the?onclick?property (which now becomes a method). So if the event handler is executed?this?refers to the HTML element and its?color?is changed.
------------ window -------------------------------------- | | | | | | | ---------------- | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | ----------------------- | | | |copy of doSomething()| <-- copy function | | ----------------------- | | | ----------------------------------------------------------2.referring
<element onclick="doSomething()">這種方式只是讓onclick屬性指向了函數(shù)doSomething,并沒有把doSomething函數(shù)的內(nèi)部實現(xiàn)也包含進來，因此當(dāng)觸發(fā)點擊事件時，只是找到onclick屬性，然后告訴你去找doSomething吧，我這沒具體實現(xiàn)，找到doSomething后，這時候里面的this已經(jīng)指向window了，其實是在window下調(diào)用的doSomething函數(shù)。原解釋：
you do not copy the function! Instead, you refer to it, and the difference is crucial. The?onclick?property does not contain the actual function, but merely a function call:
doSomething();So it says “Go to doSomething() and execute it.” When we arrive at?doSomething()the?this?keyword once again refers to the global window object and the function returns error messages.
------------ window -------------------------------------- | / \ | | | | | this | | ---------------- | | | | HTML element | <-- this ----------------- | | ---------------- | | doSomething() | | | | | ----------------- | | ----------------------- / \ | | | go to doSomething() | | | | | and execute it | ---- reference to | | ----------------------- function | | | ----------------------------------------------------------3.兩個的區(qū)別就是：第一種方式是完全復(fù)制；第二種只是指向了函數(shù)。
3.1
element.onclick = doSomething; alert(element.onclick) //結(jié)果如下function doSomething() {this.style.color = '#cc0000'; }doSomething是element對象的一個屬性(方法)，類似下面：
var element = {value: "123",onclick: function doSomething() {console.log(this.value);}} element.onclick();//1233.2?
<element onclick="doSomething()"> alert(element.onclick) //結(jié)果如下function onclick() {doSomething() }doSomething是一個嵌套函數(shù)，類似下面：
var element = {value: "123",onclick: function onclick(){doSomething();}} function doSomething() {console.log(this.value); } element.onclick();//undefined嵌套函數(shù)中的this要么指向window（非嚴格模式），要么undefined（嚴格模式）
參考鏈接：https://www.quirksmode.org/js/this.html
https://blog.csdn.net/u013584334/article/details/81192899
總結(jié)
以上是生活随笔為你收集整理的element.onclick = fun与element onclick=fun()的区别的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 通过CSS修改checkbox样式(利用
- 下一篇： JS中的变量提升