Ipapakita ng post na ito ang 'event.target' at ang paggamit nito sa JavaScript.
Ano ang 'event.target' sa JavaScript?
Ang ' kaganapan.target Ang ” ay isang ari-arian/katangian ng “ kaganapan ” sa JavaScript. Ito ay tumutukoy sa elementong nag-trigger sa kaganapan. Para ma-access ang attribute na event.target, dapat pakinggan ang event ng elemento. Ang ' addEventListener() ” paraan ay ginagamit para sa pakikinig sa partikular na kaganapan.
Syntax
Para sa paggamit ng property na 'event.target', sundin ang ibinigay na syntax:
elemento. addEventListener ( '
console. log ( kaganapan. target )
} )
Sa ibinigay na syntax,
- Ang ' addEventListener() Ang paraan ng ” ay ginagamit para sa pagdaragdag ng event handler para sa partikular na elemento.
- “
” ay nagpapahiwatig ng anumang kaganapan, tulad ng “ i-click ”, “ mouseover ', at iba pa.
Halimbawa
Sa ibinigay na halimbawa, makukuha natin ang elementong nag-trigger sa kaganapan gamit ang ' kaganapan.target ” ari-arian.
Dito, gagawa kami ng isang pindutan sa pamamagitan ng pagtatalaga ng isang id ' btn ” na ginagamit sa JavaScript para sa pag-access sa button:
< button id = 'btn' > Pindutin dito pindutan >
Sa JavaScript file, una, makukuha natin ang reference ng button gamit ang nakatalagang id nito sa tulong ng ' getElementById() 'paraan:
const pindutan = dokumento. getElementById ( 'btn' ) ;Maglakip ng tagapakinig ng kaganapan gamit ang button. Ang ' i-click Ang kaganapan ay pinasimulan sa pag-click ng button, at ang object ng kaganapan ay ipinasa sa tagapakinig ng kaganapan bilang isang argumento. Ang ' kaganapan.target ” na attribute ay naa-access mula sa listener function upang makakuha ng reference sa elemento ng button na nag-trigger sa kaganapan:
pindutan. addEventListener ( 'click' , function ( kaganapan ) {console. log ( 'Target na kaganapan:' , kaganapan. target ) ;
} ) ;
Ipinapakita ng output ang reference ng partikular na button na na-click:
Maaari kang makakuha ng higit pang impormasyon at maglapat ng iba't ibang functionality tulad ng pag-istilo sa naka-target na kaganapan gamit ang mga katangian nito.
Ano ang mga Katangian ng 'event.target'?
Mayroong iba't ibang katangian ng property na 'event.target' na nagbibigay ng impormasyon tungkol sa target na elemento. Ang ilan sa mga karaniwang katangian ng event.target object ay ang mga sumusunod:
| kaganapan.target na Katangian | Paglalarawan |
| kaganapan.target.tag | Ginagamit para sa pagkuha ng ' pangalan ” ng HTML tag ng target na elemento. |
| event.target.value | Gamitin para sa pagkuha ng ' halaga ” ng target na elemento. Ang katangiang ito ay kadalasang ginagamit para sa mga elemento ng pag-input. |
| event.target.id | Para makuha ang ' id ” attribute ng target na elemento, gamitin ang ibinigay na attribute. |
| event.target.classList | Ang listahan ng ' mga klase ” na naglalaman ng target na elemento ay ina-access ng attribute na ito. |
| event.target.textContent | Ginagamit para sa pagkuha ng ' nilalaman ng teksto ” ng target na elemento. |
| event.target.href | Kinukuha ng katangiang ito ang ' href ” attribute ng target na elemento, gaya ng mga link. |
| event.target.style | Para sa pagbabago ng ' CSS ” property ng target na elemento, gamitin ang attribute na ito. |
Halimbawa 1: Baguhin ang Kulay ng Background ng Target na Element
Sa ibinigay na halimbawa, babaguhin namin ang kulay ng background ng target na elemento gamit ang ' istilo 'attribute sa' i-click ” kaganapan:
const pindutan = dokumento. getElementById ( 'btn' ) ;pindutan. addEventListener ( 'click' , function ( kaganapan ) {
kaganapan. target . istilo . kulay ng background = 'asul' ;
} ) ;
Output
Halimbawa 2: Kunin ang Halaga ng Target na Elemento
Gumawa ng input text field at isang lugar para sa pagpapakita ng text gamit ang
tag. Magtalaga ng mga id sa input field at
tag bilang “ takeInput 'at' palabas ”, ayon sa pagkakabanggit:
< uri ng input = 'text' id = 'takeInput' >< p id = 'palabas' > p >
Kunin ang sanggunian ng field ng teksto gamit ang “ getElementById() 'paraan:
ay input = dokumento. getElementById ( 'takeInput' ) ;Gamitin ang ' halaga ' attribute na may ' kaganapan.target ” upang makuha ang halaga ng naka-target na elemento:
input. addEventListener ( 'input' , ( kaganapan ) => {dokumento. getElementById ( 'palabas' ) . innerHTML = kaganapan. target . halaga ;
} )
Tulad ng nakikita mo na ang halaga na ipinasok sa kahon ng teksto ay matagumpay na nakuha gamit ang ' halaga ” attribute:
Iyon ay tungkol sa 'event.target' sa JavaScript.
Konklusyon
Ang ' kaganapan.target ” ay tumutukoy sa elementong nag-trigger/nagpasimula ng kaganapan. Mayroong ilang mga katangian ng property na 'event.target' na nagbibigay ng impormasyon tungkol sa target na elemento. Halimbawa, ' kaganapan.target.tag ”, “ .halaga ”, “ .id ”, “ .style ', at iba pa. Inilalarawan ng post na ito ang 'event.target', ang mga katangian nito, at ang paggamit nito sa JavaScript.