jQuery event.target Property

jQuery er et populært JavaScript-bibliotek, der gør det lettere at manipulere HTML-elementer, styre animationssekvenser og arbejde med events. En af de mest nyttige egenskaber i jQuery erevent.target. Denne egenskab giver dig mulighed for at få fat i det specifikke HTML-element, som et event er blevet udført på. I denne artikel vil vi udforske, hvordan du kan brugeevent.targeti jQuery og demonstrere nogle praktiske eksempler.

Hvad er event.target?

I jQuery repræsentererevent.targetdet HTML-element, på hvilket et event er blevet udløst. Når et event forekommer, kan det enten udføres direkte på det aktuelle element eller på et af dens underordnede elementer. Ved hjælp afevent.targetkan du identificere det præcise element, som eventet er blevet udført på, uanset om det er det aktuelle element eller et af dets børneelementer.

Syntax

For at få fat ievent.targeti jQuery kan du bruge følgende syntax:

$(selector).on(eventName, function(event) { var targetElement = event.target;});

Her eksistererselectorfor at målrette det ønskede HTML-element,eventNameer navnet på det event, du vil lytte efter, ogfunction(event)er en callback-funktion, der bliver udført, når eventet er blevet udløst på det element, der matcher selector.

Brug af event.target i praksis

Lad os gennemgå nogle praktiske eksempler på, hvordan du kan brugeevent.targeti jQuery:

Eksperiment 1: Ændring af baggrundsfarve

Lad os begynde med et simpelt eksempel. Forestil dig, at vi har en HTML-side med flere

-elementer, og vi vil ændre baggrundsfarven på det specifikke

-element, der blev klikket på. Her er, hvordan du kan opnå dette ved hjælp afevent.target:

$(document).ready(function() { $(div).on(click, function(event) { $(event.target).css(background-color, red); });});

I dette eksempel vil hver gang et

-element bliver klikket på, vil baggrundsfarven blive ændret til rød. Ved at brugeevent.targetfår vi fat i det specifikke

-element, der blev klikket på, og anvender derefter CSS til at ændre baggrundsfarven.

Eksperiment 2: Validering af formularindstillinger

Et andet anvendelsesscenarie forevent.targeter formularvalidering. Forestil dig, at vi har en formular med flere inputfelter, og vi vil validere hver input ved at ændre baggrundsfarven, hvis indtastningen ikke opfylder kriterierne. Her er et eksempel, der brugerevent.targettil validering:

$(document).ready(function() { $(input).on(blur, function(event) { var input = $(event.target); if (input.val().length< 3) { input.css(background-color, yellow); } else { input.css(background-color, white); } });});

I dette eksempel, hver gang et inputfelt mister fokus (blur event), vil vi kontrollere indholdet ved at kontrollere længden af værdien ved hjælp afinput.val().length. Hvis længden er mindre end tre tegn, ændres baggrundsfarven til gul, ellers ændres baggrundsfarven til hvid. Ved at brugeevent.targetfår vi fat i det konkrete inputfelt, der mistede fokus, og kan anvende valideringen på det.

Opsummering

event.targeter en kraftfuld egenskab i jQuery, der giver dig mulighed for at få fat i det specifikke HTML-element, hvor et event blev udført. Ved at brugeevent.targetkan du opnå mere præcis og målrettet manipulation af elementer og interaktion med brugerne. Vi har set nogle praktiske eksempler, der illustrerer, hvordan du kan brugeevent.targeti både styling og validering. Ved at eksperimentere med denne egenskab kan du opdage mange flere måder at udnytte dens funktionalitet på i dine jQuery-projekter.

Ofte stillede spørgsmål

Hvad er event.target egenskaben i jQuery?

event.target-egenskaben i jQuery returnerer det DOM-element, der blev udløst begivenheden.

Hvad er formålet med event.target-egenskaben i jQuery?

Formålet med event.target-egenskaben i jQuery er at identificere det specifikke DOM-element, der udløste en given begivenhed.

Kan man bruge event.target-egenskaben til at ændre attributterne på det element, der udløste begivenheden?

Ja, man kan bruge event.target-egenskaben til at tilgå og ændre attributterne på det element, der udløste begivenheden.

Hvordan kan man bruge event.target-egenskaben til at opnå en klikbegivenhed på et specifikt element?

Ved at bruge event.target-egenskaben kan man sammenligne det DOM-element, der blev klikket på, med det ønskede element og udføre en bestemt handling, hvis de matcher.

Hvordan kan man bruge event.target-egenskaben til at opnå en hoverbegivenhed på et specifikt element?

Ved at bruge event.target-egenskaben kan man sammenligne det DOM-element, der udløste hoverbegivenheden, med det ønskede element og udføre en bestemt handling, hvis de matcher.

Hvordan kan man bruge event.target-egenskaben til at opnå en changebegivenhed på et specifikt input-element?

Ved at bruge event.target-egenskaben kan man identificere det specifikke input-element, der udløste changebegivenheden og derefter udføre en handling baseret på den.

Hvordan kan man bruge event.target-egenskaben til at opnå en submitbegivenhed på en bestemt formular?

Ved at bruge event.target-egenskaben kan man identificere den specifikke formular, der blev indsendt, og udføre en handling baseret på den.

Hvordan kan man bruge event.target-egenskaben til at opnå en mouseoverbegivenhed på et specifikt element?

Ved at bruge event.target-egenskaben kan man sammenligne det DOM-element, der udløste mouseoverbegivenheden, med det ønskede element og udføre en bestemt handling, hvis de matcher.

Kan man bruge event.target-egenskaben til at stoppe spredning af en SVG-begivenhed i jQuery?

Ja, ved at bruge event.target-egenskaben kan man stoppe spredning af en SVG-begivenhed i jQuery ved at bruge funktionen stopPropagation().

Hvordan kan man bruge event.target-egenskaben til at ændre CSS-stilreglerne for det element, der udløste begivenheden?

Ved at bruge event.target-egenskaben kan man identificere det specifikke DOM-element, der udløste begivenheden, og derefter ændre CSS-stilreglerne for det element ved hjælp af jQuerys funktioner og metoder.

Andre populære artikler: Python File Methods • Hvordan man laver en mega-menu • PHP vsprintf() Funktion • PHP is_string() Funktion • Introduktion • Python finally Keyword • Python er et nøgleord i programmering • RegExp ?= Quantifier • Java Math Reference • HTML Ordnede Lister • Bootstrap 4 Toast: En dybdegående guide til toastbeskeder • Java class Keyword • PostgreSQL - INNER JOIN • Node.js Crypto Module • Data Science - Brug af Python til datavidenskab • PHP MySQL Valg af data med ORDER BY-klausulen • En dybdegående artikel om Angular ng-dblclick Directive • C Pointers - En dybdegående gennemgang • Python reversed() Funktion • CSS ::first-letter Selector