淺談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è)面,或者說是全局對(duì)象.
所以我們執(zhí)行dosomething()這個(gè)函數(shù),會(huì)引發(fā)錯(cuò)誤.因?yàn)楹瘮?shù)的this指向的是全局對(duì)象window,而window對(duì)象沒有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í)你沒有復(fù)制這個(gè)方法,而是引用了這個(gè)方法,onclick屬性并不包含實(shí)際的方法,僅僅只是一個(gè)方法的調(diào)用.當(dāng)我們執(zhí)行這個(gè)方法時(shí),this再次指向全局window對(duì)象并引發(fā)錯(cuò)誤.
以上就是本文的全部?jī)?nèi)容了，有需要的小伙伴好好來研究下吧。
相關(guān)文章
JavaScript利用canvas實(shí)現(xiàn)星空效果
Canvas對(duì)于我們前端來說是一個(gè)非常強(qiáng)大的工具,它可以實(shí)現(xiàn)各種復(fù)雜的圖形和動(dòng)畫效果,我們?nèi)绻軌蚴炀氄莆账?我們就可以做很多炫酷的效果,本文就給大家介紹了用canvas畫出一片星空的方法,需要的朋友可以參考下2023-11-11
Javascript實(shí)現(xiàn)帶關(guān)閉按鈕的網(wǎng)頁(yè)漂浮廣告代碼
帶有關(guān)閉功能的漂浮圖片的實(shí)現(xiàn)方法有很多，下面為大家介紹下使用Javascript是如何實(shí)現(xiàn)的，喜歡的額朋友可以了解下2014-01-01
javascript的回調(diào)函數(shù)應(yīng)用示例
回調(diào)函數(shù)就是一個(gè)通過函數(shù)指針調(diào)用的函數(shù)。下面以示例的方式為大家介紹下其具體的使用2014-02-02
這篇文章主要介紹了JS立即執(zhí)行的匿名函數(shù),結(jié)合實(shí)例形式分析了;(function() {})();相關(guān)原理、使用技巧及操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
JS中怎樣判斷undefined(比較不錯(cuò)的方法)
用servlet賦值給html頁(yè)面文本框值后,用alert來彈出這個(gè)值.結(jié)果顯示"undefined".下面為大家介紹下具體的判斷方法，大家可以參考下2014-03-03
在本篇文章里小編給大家整理的是關(guān)于js實(shí)現(xiàn)無限瀑布流實(shí)例方法以及相關(guān)代碼，需要的朋友們學(xué)習(xí)下吧。2019-09-09
這篇文章主要介紹的是如何利用fecha進(jìn)行JS日期處理，在日常項(xiàng)目中，經(jīng)常會(huì)碰到日期處理的需求，這種需求千奇百怪，而且往往經(jīng)常變化。雖然js提供了原生的Date方法供我們選擇，但一些復(fù)雜的日期時(shí)間處理起來往往力不從心。下面通過這篇文章來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
javascript 播放器 控制...2007-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)手寫板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
bootstrap-table 是一個(gè)輕量級(jí)的table插件，使用AJAX獲取JSON格式的數(shù)據(jù)，其分頁(yè)和數(shù)據(jù)填充很方便，支持國(guó)際化。這篇文章介紹了bootstrap中table分頁(yè)插件的使用，感興趣的朋友一起看看吧2016-10-10