JS觸發(fā)事件event.target VS event.currentTarget實例
更新時間：2023年10月25日 10:52:10 作者：熱飯班長
這篇文章主要介紹了JS觸發(fā)事件event.target VS event.currentTarget實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
定義
event.target為觸發(fā)事件的元素
event.currentTarget為綁定事件處理函數(shù)的元素
事件處理程序綁定在div上
<div onClick="onClick">
<button>按鈕</button>
</div>
// 情況1：點擊button
const onClick = (event) => {
console.log(event.target) // 為button，觸發(fā)事件的元素
console.log(event.currentTarget) // 為div，綁定事件處理函數(shù)的元素
}
// 情況2：點擊div
const onClick = (event) => {
console.log(event.target) // 為div，觸發(fā)事件的元素
console.log(event.currentTarget) // 為div，綁定事件處理函數(shù)的元素
}事件處理程序綁定在button上
<div>
<button onClick="onClick">按鈕</button>
</div>
// 情況1：點擊button
const onClick = (event) => {
console.log(event.target) // 為button，觸發(fā)事件的元素
console.log(event.currentTarget) // 為button，綁定事件處理函數(shù)的元素
}
// 情況2：點擊div，由于div上沒有事件處理函數(shù)，所以點擊不會有任何事情發(fā)生以上就是JS觸發(fā)事件event.target VS event.currentTarget實例的詳細(xì)內(nèi)容，更多關(guān)于JS觸發(fā)事件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js輸入中文效果...2006-09-09
這篇文章主要介紹了JavaScript實現(xiàn)的選擇排序算法,結(jié)合實例形式分析了選擇排序的原理、實現(xiàn)步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-04-04
這篇文章主要給大家介紹了關(guān)于JavaScript如何正確的寫代碼注釋的相關(guān)資料,注釋的作用是提高代碼的可讀性,幫助自己和別人閱讀和理解你所編寫的JavaScript代碼,注釋的內(nèi)容不會在網(wǎng)頁中顯示,需要的朋友可以參考下2023-10-10
解析img圖片沒找到onerror事件 Stack overflow at line: 0
本篇文章主要介紹了img圖片沒找到onerror事件 Stack overflow at line: 0 需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript封裝彈框插件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
JavaScript實現(xiàn)x秒后自動跳轉(zhuǎn)到一個頁面
今天看視頻學(xué)習(xí)時學(xué)習(xí)了一種新技術(shù)，即平時我們在一個頁面點擊“提交”或“確認(rèn)”會自動跳轉(zhuǎn)到一個頁面,在網(wǎng)上搜了一下，關(guān)于這個技術(shù)處理有多種方法,有興趣的朋友可以參考下2013-01-01
其實就是利用了Microsoft.XMLHTTP實現(xiàn)遠(yuǎn)程文件的保存，不過需要修改下才可以運行，地址傳參問題2013-04-04
昨天碰到一道關(guān)于如何解決有序數(shù)組的連接問題，這是一個很常見的問題。但是這里要考慮到代碼的效率問題，因為要連接的數(shù)組都是有序的，這是一個非常重要的前提條件2013-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡單九宮格抽獎，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
JavaScript Cookie 直接瀏覽網(wǎng)站分網(wǎng)址
2009-12-12