淺談javascript中this在事件中的應(yīng)用
this關(guān)鍵字在javascript中是非常強(qiáng)大的,但是如果你不清楚它是怎么工作的就很難使用它.
function dosomething(){ this.style.color="#fff"; }
上面這段代碼中的this指向什么呢,運(yùn)行dosomething()會(huì)輸出什么呢?
在javascript中,this總是指向當(dāng)前執(zhí)行的這個(gè)函數(shù),或者把函數(shù)作為方法調(diào)用的這個(gè)對(duì)象.當(dāng)我們?cè)陧?yè)面上定義dosomething()這個(gè)方法后,this的所有者就是當(dāng)前的頁(yè)面,或者說(shuō)是全局對(duì)象.
所以我們執(zhí)行dosomething()這個(gè)函數(shù),會(huì)引發(fā)錯(cuò)誤.因?yàn)楹瘮?shù)的this指向的是全局對(duì)象window,而window對(duì)象沒(méi)有style屬性.
復(fù)制:
element.onclick=dosomething;
dosomething()現(xiàn)在被整個(gè)復(fù)制到onclick屬性上作為一個(gè)方法.所以如果這個(gè)事件執(zhí)行的話,this就指向這個(gè)HTML元素,相應(yīng)HTML元素的color就會(huì)改變.dosomething每次復(fù)制到事件上,this就會(huì)指向當(dāng)前執(zhí)行這個(gè)方法的html元素.
引用:
<element onclick="dosomething()">
此時(shí)你沒(méi)有復(fù)制這個(gè)方法,而是引用了這個(gè)方法,onclick屬性并不包含實(shí)際的方法,僅僅只是一個(gè)方法的調(diào)用.當(dāng)我們執(zhí)行這個(gè)方法時(shí),this再次指向全局window對(duì)象并引發(fā)錯(cuò)誤.
以上就是本文的全部?jī)?nèi)容了，有需要的小伙伴好好來(lái)研究下吧。
相關(guān)文章
這篇文章主要介紹了詳解性能更優(yōu)越的小程序圖片懶加載方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
JS實(shí)現(xiàn)在文本指定位置插入內(nèi)容的簡(jiǎn)單示例
下面小編就為大家分享一篇JS實(shí)現(xiàn)在文本指定位置插入內(nèi)容的簡(jiǎn)單示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
自己寫了個(gè)JS+CSS的小東西，用來(lái)看提升用戶體驗(yàn)的。 Name：WindowsTextShow；2008-12-12
微信小程序?qū)崿F(xiàn)手勢(shì)圖案鎖屏功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手勢(shì)圖案鎖屏功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
JS Generator函數(shù)yield表達(dá)式示例詳解
這篇文章主要為大家介紹了JS Generator函數(shù)yield表達(dá)式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
js限制checkbox選中個(gè)數(shù)以限制六個(gè)為例
需要展示多個(gè)checkbox復(fù)選框，而只能允許最多選6個(gè),下面為大家介紹下如何使用js限制checkbox選中個(gè)數(shù),需要的朋友可以參考下2014-07-07
eval與window.eval的差別分析，學(xué)習(xí)js的朋友可以了解下。2011-03-03
Js setInterval與setTimeout(定時(shí)執(zhí)行與循環(huán)執(zhí)行)的代碼(可以傳入?yún)?shù))
最近在做項(xiàng)目時(shí)用到了定時(shí)執(zhí)行的js方法，setInterval與setTimeout時(shí)間長(zhǎng)了不用有些生疏了，所以自己總結(jié)了一下，記下來(lái)，以便以后使用。2010-06-06
這篇文章主要為大家詳細(xì)介紹了超簡(jiǎn)單的微信小程序輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
js驗(yàn)證輸入是否為手機(jī)號(hào)碼或電話號(hào)碼示例
使用js驗(yàn)證輸入是否為手機(jī)號(hào)碼或電話號(hào)碼，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-12-12