JavaScript DOM események: Onclick és Onload

Az internet kezdeteiben a weboldalak valóban statikusak voltak - csak szöveg és képek voltak. Persze, néha ez a kép animált gif volt, de még mindig csak kép volt.

A JavaScript megjelenésével egyre inkább lehetővé vált olyan interaktív oldalak létrehozása, amelyek reagálnak olyan műveletekre, mint például egy gombra való kattintás vagy egy gördülő animáció.

Számos DOM (Document Object Model) eseményeket meg lehet hallgatni a JavaScript, de onclickés onloadaz egyik leggyakoribb.

Onclick esemény

A onclickJavaScript-ben található esemény lehetővé teszi egy függvény végrehajtását, amikor egy elemre kattint.

Példa

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

A fenti egyszerű példában, amikor a felhasználó rákattint a gombra, riasztást fog látni a böngészőjében Button was clicked!.

onclickDinamikus hozzáadás

A fenti példa működik, de általában rossz gyakorlatnak számít. Ehelyett jobb, ha az oldal (HTML) tartalmát elkülönítjük a logikától (JS).

Ehhez az onclickesemény programszerűen hozzáadható bármely elemhez a következő példában a következő példában:

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!"); }

jegyzet

Fontos megjegyezni, hogy a használatával onclickcsak egy figyelő funkciót adhatunk hozzá. Ha többet szeretne hozzáadni, akkor csak használja addEventListener(), ami az események hozzáadásának preferált módja.

A fenti példában, amikor a felhasználó rákattint a paragraphelemre a elemben, htmlriasztást fog látni onclick Event triggered.

Az alapértelmezett műveletek megakadályozása

Ha azonban onclicklinkekhez (HTML- acímkékhez) csatolunk , akkor érdemes lehet megakadályozni az alapértelmezett műveletek előfordulását:

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"); } 

A fenti példában megakadályoztuk az aelem (nyitó link) alapértelmezett viselkedését event.preventDefault()a onclickvisszahívási funkciónk használatával.

Onload esemény

Az onloadesemény egy JavaScript betöltésére szolgál, közvetlenül az oldal betöltése után.

Példa:

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

Ami rövidíthető:

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

A fenti példában, amint a weboldal betöltődik, myFunctionmeghívásra kerül a függvény, amely megmutatja a Page finished loadingriasztást a felhasználónak.

Az onloadesemény általában az elemhez van csatolva . Aztán amint az oldal betöltődött, amely tartalmazza az összes képet, valamint a CSS és JS fájlokat, a parancsfájl futtatni fog.

Több információ:

Ez csak kettő a sok DOM-esemény közül, amelyeket manipulálhat a JavaScript-szel, de a leggyakrabban használtak közé tartoznak.

De néha egyáltalán nem kell hallgatnia a DOM eseményeket, és időalapú eseményeket szeretne használni, például visszaszámlálást. Az események időzítésével kapcsolatos gyors bemutatóért olvassa el ezt a cikket.