JavaScript Onclick-begivenhed forklaret

Den onclickbegivenhed i JavaScript kan du som programmør udføre en funktion, når et element er klikket på.

Knap Onclick-eksempel

Click me  function myFunction() { alert('Button was clicked!'); } 

I det enkle eksempel ovenfor, når en bruger klikker på knappen, vil de se en advarsel i deres browser, der viser Button was clicked!.

Tilføjelse af onclick dynamisk

Den onclickbegivenhed kan også programmæssigt tilsat til ethvert element ved hjælp af følgende kode i det følgende eksempel:

click on this element.

var p = document.getElementById("foo"); // Find the paragraph element in the page p.onclick = showAlert; // Add onclick function to element function showAlert(event) { alert("onclick Event triggered!"); }

Bemærk

Det er vigtigt at bemærke, at ved hjælp af onclick kan vi kun tilføje en lytterfunktion. Hvis du vil tilføje mere, skal du bare bruge addEventListener (), som er den foretrukne måde at tilføje begivenhedslytter på.

I ovenstående eksempel, når en bruger klikker på paragraphelementet i html, vil de se en advarsel, der viser onclick Event triggered.

Forebyggelse af standardhandling

Men hvis vi vedhæfter os onclicktil links (HTML's atag), vil vi måske forhindre, at der sker en standardhandling:

Guides  function myAlert(event) { event.preventDefault(); alert("Link was clicked but page was not open"); } 

I ovenstående eksempel forhindrede vi aelementets standardopførsel (åbningslink) ved hjælp af event.preventDefault()vores onclicktilbagekaldsfunktion.

MDN

Andre ressourcer

jQuery .on () Event Handler Attachment