JavaScript DOM-begivenheder: Onclick og Onload

I de tidlige dage af Internettet var websider virkelig statiske - der var kun tekst og billeder. Sikker på, nogle gange var det billede en animeret gif, men det var stadig bare et billede.

Med fremkomsten af ​​JavaScript blev det i stigende grad muligt at oprette interaktive sider, der reagerede på handlinger som at klikke på en knap eller have en rulleanimation.

Der er en række DOM-hændelser (Document Object Model), som du kan lytte til i JavaScript, men onclicksom onloader blandt de mest almindelige.

Onclick begivenhed

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

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øjer onclickdynamisk

Eksemplet ovenfor fungerer, men betragtes generelt som dårlig praksis. I stedet er det bedre at adskille indholdet på siden (HTML) fra logikken (JS).

For at gøre dette kan onclickbegivenheden tilføjes programmatisk til ethvert element ved hjælp af følgende kode i følgende eksempel:

click on this element.

const 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 brug af kun onclickkan tilføje en lytterfunktion. Hvis du vil tilføje mere, skal du bare bruge addEventListener(), hvilket er den foretrukne måde at tilføje begivenheder 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  const link = document.getElementById("bar"); // Find the link element link.onclick = myAlert; // Add onclick function to element 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.

Onload begivenhed

Den onloadbegivenhed bruges til at udføre en JavaScript-funktion umiddelbart efter en side er indlæst.

Eksempel:

const body = document.body; body.onload = myFunction; function myFunction() { alert('Page finished loading'); } 

Hvilket kan afkortes til:

document.body.onload = function() { alert('Page finished loading'); } 

I ovenstående eksempel myFunctionkaldes funktionen , så snart websiden er indlæst, og viser Page finished loadingalarmen til brugeren.

Den onloadbegivenhed er normalt fastgjort til elementet. Så når siden på siden er indlæst, som inkluderer alle billeder og CSS- og JS-filer, kører dit script.

Mere information:

Dette er kun to af de mange DOM-begivenheder, du kan manipulere med JavaScript, men er blandt de mest almindeligt anvendte.

Men nogle gange behøver du slet ikke at lytte til DOM-begivenheder og vil gerne bruge en tidsbaseret begivenhed som en nedtælling. Se denne artikel for en hurtig vejledning om timing af begivenheder.