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