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的简单分析.