基于js中this和event 的區(qū)別(詳解)
今天在看javascript入門經(jīng)典-事件一章中看到了 this 和 event 兩種傳參形式。因?yàn)樽鳛橐粋€(gè)初級(jí)的前端開發(fā)人員平時(shí)只用過 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語言的一個(gè)關(guān)鍵字。
2.this代表函數(shù)運(yùn)行時(shí)，自動(dòng)生成的一個(gè)內(nèi)部對(duì)象，只能在函數(shù)內(nèi)部使用。
3.this和event.target的區(qū)別：
js中事件是會(huì)冒泡的，所以this是可以變化的，但event.target不會(huì)變化（在事件觸發(fā)時(shí)，只傳遞當(dāng)前event對(duì)象的引用），它永遠(yuǎn)是直接接受事件的目標(biāo)DOM元素；
另外，this和event.target都是dom對(duì)象，如果要使用jquey中的方法可以將他們轉(zhuǎn)換為jquery對(duì)象：$(this)和$(event.target);
以上這篇基于js中this和event 的區(qū)別(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
解決layui中的form表單與button的點(diǎn)擊事件沖突問題
今天小編就為大家分享一篇解決layui中的form表單與button的點(diǎn)擊事件沖突問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
javascript iframe中打開文件,并檢測(cè)iframe存在否
從iframe中打開文件,并檢測(cè)iframe存在否如果說只是檢測(cè)頁面存在否,直接設(shè)置target用偽協(xié)議就可以解決了...2008-12-12
之前當(dāng)vue更新到2.0之后，作者就宣告不再對(duì)vue-resource更新，而是推薦的axios,前一段時(shí)間用了一下，現(xiàn)在說一下它的基本用法。文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
JavaScript異步編程:異步數(shù)據(jù)收集的具體方法
我們先嘗試在不借助任何工具函數(shù)的情況下來解決這個(gè)問題。筆者能想到的最簡(jiǎn)單的方法是：因前一個(gè)readFile的回調(diào)運(yùn)行下一個(gè)readFile，同時(shí)跟蹤記錄迄今已觸發(fā)的回調(diào)次數(shù)，并最終顯示輸出。下面是筆者的實(shí)現(xiàn)結(jié)果。2013-08-08
詳解JavaScript中Proxy與Object.defineProperty的區(qū)別
Proxy和Object.defineProperty都是JavaScript中用于實(shí)現(xiàn)對(duì)象屬性攔截和代理的機(jī)制，但它們?cè)诠δ芎蛻?yīng)用方面有一些區(qū)別，本文通過代碼示例詳細(xì)介紹了二者的區(qū)別,感興趣的朋友可以參考下2023-06-06
這篇文章主要介紹了JavaScript三大變量聲明詳析,三大變量聲明主要包括var、const和let，下面文章我們就圍繞三者展開詳細(xì)內(nèi)容介紹，需要的朋友可以參考一下2022-06-06
jQuery實(shí)現(xiàn)手風(fēng)琴特效
這篇文章主要為大家詳細(xì)介紹了前端js實(shí)現(xiàn)手風(fēng)琴效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)吸頂效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
Bootstrap入門書籍之（零）Bootstrap簡(jiǎn)介
Bootstrap是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文給大家介紹Bootstrap入門書籍之（零）Bootstrap簡(jiǎn)介，需要的朋友參考下2016-02-02
ES6 Map結(jié)構(gòu)的應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 Map結(jié)構(gòu)的應(yīng)用,結(jié)合實(shí)例形式分析了ES6中map鍵值對(duì)hash結(jié)構(gòu)相關(guān)定義、獲取、輸出、遍歷等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06