onclick事件屬性與在用js綁定onclick事件中的this的區別

一句話:this永遠指向所在函數的擁有者.

舉幾個例子:

1.id為"aa"的a元素有一個onclick屬性,屬性值為f1()

<a href="javascript:;" title="" id="aa" onclick="f1()">分類列表</a>

//f1的定義
function f1(){console.log(this);}

//查看a元素的onclick屬性是什么
console.log(document.getElementById("aa").onclick)
function  onclick(event) {
  f1()
}

通過以上console.log發現,a元素的onclick屬性是一個名為onclick的函數,此函數形參是event,函數內容是調用f1.

然后我觸發此元素的onclick時間后,是這個結果:

Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

也就是說,f1中的this指向了window.為什么呢,因為文字最開始說的那句話:this指向所在函數的擁有者,f1的擁有者是誰?是window對象.可以打印出來看看:

console.log(document.getElementById("aa").f1)
undefined
undefined
console.log(window.f1)
function f1(){console.log(this);}
undefined

 2.id為"aa"的a元素有一個onclick屬性,屬性值為f1(this)

<a href="JavaScript:;" title="" onclick="f1(this)" id="aa">分類列表</a>

//f1的定義,有個形參,並打印
function f1(o){console.log(o);}

看看aa元素的onclick屬性是什么:

console.log(document.getElementById('aa').onclick)
function onclick(event) {
  f1(this)
}

aa的onclick屬性指向一個名為onclick的函數,這個函數內部調用了函數f1,那此時f1中的this又是誰?看看就知道了:

我觸發onclick事件后,打印出來的this:

<a href="JavaScript:;" title="" onclick="f1(this)" id="aa">分類列表</a>

為什么呢?因為this指向其所在函數的擁有者,即:onclick函數的擁有者,即aa元素.

3.　id為"aa"的a元素綁定了一個onclick事件(並沒有onclick屬性)

<a href="JavaScript:;" title="" id="aa">分類列表</a>

//綁定了onclick事件
function f1(){console.log(this);}
document.getElementById('aa').onclick=f1;

從以上js代碼可以看出,aa元素有一個onclick屬性,這個屬性指向了函數f1;

我觸發onclick事件后,打印的this:

<a href="JavaScript:;" title="" id="aa">分類列表</a>

為什么呢,因為this指向其所在函數的擁有者,即aa元素.

以上就是對onclick事件中this的簡單分析.