基于js中this和event 的區(qū)別(詳解)
今天在看javascript入門經(jīng)典-事件一章中看到了 this 和 event 兩種傳參形式。因為作為一個初級的前端開發(fā)人員平時只用過 this傳參，so很想弄清楚，this和event的區(qū)別是什么，什么情況下用什么比較合適。
onclick = changeImg(this) vs onclick = changeImg(event)
<img src='usa.gif' onclick="changeImg(event)" />
<script>
var myImages = [
'usa.gif'，'canada.gif','jamaica.gif','mexico.gif'
];
function changeImg(e) {
var el = e.target;
var newImgNumber = Math.round(Math.round()*3);
while(el.src.indexOf(myImages[newImgNumber]) != -1){
el.src =myImages[newImgNumber];
}
}
</script>
1.this是Javascript語言的一個關(guān)鍵字。
2.this代表函數(shù)運行時，自動生成的一個內(nèi)部對象，只能在函數(shù)內(nèi)部使用。
3.this和event.target的區(qū)別：
js中事件是會冒泡的，所以this是可以變化的，但event.target不會變化（在事件觸發(fā)時，只傳遞當(dāng)前event對象的引用），它永遠是直接接受事件的目標(biāo)DOM元素；
另外，this和event.target都是dom對象，如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對象：$(this)和$(event.target);
以上這篇基于js中this和event 的區(qū)別(詳解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
詳解js對象中屬性的兩種類型之?dāng)?shù)據(jù)屬性和訪問器屬性
在理解vue底層響應(yīng)式原理時，了解到，原來對象中的屬性，不單單從表面看起來那么簡單是key:value形式，而是還有隱藏的內(nèi)部特性，其中對象內(nèi)的屬性分為兩種類型的屬性：數(shù)據(jù)屬性和訪問器屬性，本文將給大家詳細介紹一下數(shù)據(jù)屬性和訪問器屬性,需要的朋友可以參考下2023-05-05
JavaScript 數(shù)組去重并統(tǒng)計重復(fù)元素出現(xiàn)的次數(shù)實例
下面小編就為大家分享一篇JavaScript 數(shù)組去重并統(tǒng)計重復(fù)元素出現(xiàn)的次數(shù)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
這篇文章主要介紹了通過實例解析json與jsonp原理及使用方法,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了JCrop+ajaxUpload 圖像切割上傳的實例代碼的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
本篇文章主要介紹了微信小程序模擬 cookie的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要給大家介紹了一個關(guān)于JS正則匹配的踩坑記錄，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
微信小程序引入外部icon(阿里巴巴矢量圖標(biāo))的全過程
在小程序中,有默認的圖標(biāo)icon組件,但你會發(fā)現(xiàn)它的圖標(biāo)樣式很少,可能很多時候并不能滿足我們的需求,所以這篇文章主要給大家介紹了關(guān)于微信小程序引入外部icon(阿里巴巴矢量圖標(biāo))的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了js動態(tài)修改表格行colspan列跨度的方法,實例分析了javascript動態(tài)修改html中table屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
淺析JavaScript中回調(diào)地獄與asyn函數(shù)和await函數(shù)原理
這篇文章主要介紹了JavaScript中回調(diào)地獄與asyn函數(shù)和await函數(shù)原理，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
javascript正則表達式中參數(shù)g(全局)的作用
表達式加上參數(shù)g之后，表明可以進行全局匹配，注意這里可以的含義。2010-11-11