JS觸發(fā)事件event.target VS event.currentTarget實(shí)例

更新時(shí)間：2023年10月25日 10:52:10 作者：熱飯班長

這篇文章主要介紹了JS觸發(fā)事件event.target VS event.currentTarget實(shí)例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

定義

event.target為觸發(fā)事件的元素

event.currentTarget為綁定事件處理函數(shù)的元素

事件處理程序綁定在div上

<div onClick="onClick">
    <button>按鈕</button>
</div>
// 情況1：點(diǎn)擊button
const onClick = (event) => {
    console.log(event.target) // 為button，觸發(fā)事件的元素
    console.log(event.currentTarget) // 為div，綁定事件處理函數(shù)的元素
}
// 情況2：點(diǎn)擊div
const onClick = (event) => {
    console.log(event.target) // 為div，觸發(fā)事件的元素
    console.log(event.currentTarget) // 為div，綁定事件處理函數(shù)的元素
}

事件處理程序綁定在button上

<div>
    <button onClick="onClick">按鈕</button>
</div>
// 情況1：點(diǎn)擊button
const onClick = (event) => {
    console.log(event.target) // 為button，觸發(fā)事件的元素
    console.log(event.currentTarget) // 為button，綁定事件處理函數(shù)的元素
}
// 情況2：點(diǎn)擊div，由于div上沒有事件處理函數(shù)，所以點(diǎn)擊不會(huì)有任何事情發(fā)生

以上就是JS觸發(fā)事件event.target VS event.currentTarget實(shí)例的詳細(xì)內(nèi)容，更多關(guān)于JS觸發(fā)事件的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

javascript 同時(shí)在IE和FireFox獲取KeyCode的代碼
以前一直在IE8中測試網(wǎng)站，后來寫的一部分含有Ajax的代碼出現(xiàn)了故障，不得已下載了Firefox以及它的插件Firebug，才發(fā)現(xiàn)，F(xiàn)F不支持windows.event事件。于是換了一種思路。
2010-02-02
如何利用原生JS實(shí)現(xiàn)圖片預(yù)覽加上傳(前后端交互)
在做網(wǎng)站系統(tǒng)時(shí)經(jīng)常會(huì)用到圖片上傳功能,用戶往往希望能看到自己上傳的圖片的樣子,下面這篇文章主要給大家介紹了關(guān)于如何利用原生JS實(shí)現(xiàn)圖片預(yù)覽加上傳,需要的朋友可以參考下
2022-01-01
electron實(shí)現(xiàn)圖片的另存為功能
本文主要介紹了在electron中如何實(shí)現(xiàn)圖片的另存為操作,包括另存為按鈕事件的編寫,getImageType和saveAsPicture的主要代碼,以及Electron進(jìn)程與渲染進(jìn)程的交互效果,希望能為使用electron的開發(fā)者提供幫助
2024-10-10
Javascript獲取background屬性中url的值
Javascript獲取CSS中屬性值方法有很多，今天工作的時(shí)候遇到了一個(gè)問題是需要利用Javascript獲取css中background-img屬性url的值，通過查閱網(wǎng)站的資料找到了解決方法，現(xiàn)在將方法分享給大家，有需要的朋友們們可以參考借鑒，下面來一起看看吧。
2016-10-10
使用JavaScript獲取地址欄參數(shù)的方法
這篇文章主要介紹了幾種使用JavaScript獲取地址欄參數(shù)的方法以及注意事項(xiàng)，非常的實(shí)用，這里推薦給大家
2014-12-12
JavaScript/TypeScript 實(shí)現(xiàn)并發(fā)請求控制的示例代碼
這篇文章主要介紹了JavaScript/TypeScript 實(shí)現(xiàn)并發(fā)請求控制，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
利用JS hash制作單頁Web應(yīng)用的方法詳解
這篇文章主要給大家介紹了關(guān)于如何利用JS hash制作單頁Web應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
2017-10-10
layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法
今天小編就為大家分享一篇layer.msg()去掉默認(rèn)時(shí)間,實(shí)現(xiàn)手動(dòng)關(guān)閉的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
使用console進(jìn)行性能測試
各大瀏覽器內(nèi)置的開發(fā)工具，都提供了一個(gè)console對象。它主要有兩個(gè)作用：顯示網(wǎng)頁代碼運(yùn)行時(shí)的錯(cuò)誤信息。提供了一個(gè)命令行接口，用來與網(wǎng)頁代碼互動(dòng)。下面我們就來詳細(xì)研究下如何使用console進(jìn)行性能測試。
2015-04-04
JavaScript 加號(+)運(yùn)算符號
在一些框架中看到了類似這樣的寫法:+new Date();感覺有些怪,查閱了相關(guān)資料和一些網(wǎng)友的幫助.對此用法解釋如下,希望對大家有所幫助,不合適的地方請大家指正!
2009-12-12