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