JavaScript Onclick -tapahtuma selitetty

onclickTapahtuma JavaScript voit ohjelmoijana käynnistää toiminto Kun elementti napsautetaan.

Esimerkki painikkeen napsautuksesta

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

Yllä olevassa yksinkertaisessa esimerkissä, kun käyttäjä napsauttaa painiketta, hän näkee selaimessa ilmoituksen Button was clicked!.

Onclickin lisääminen dynaamisesti

onclickTapahtuma voidaan myös ohjelmallisesti lisätä mihin tahansa elementtiin seuraavan koodin avulla seuraavan esimerkin:

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

Merkintä

On tärkeää huomata, että onclickin avulla voimme lisätä vain yhden kuuntelijafunktion. Jos haluat lisätä lisää, käytä vain addEventListener (), joka on ensisijainen tapa lisätä tapahtumakuuntelijaa.

Yllä olevassa esimerkissä, kun käyttäjä napsauttaa paragraphelementtiä html, hän näkee hälytyksen onclick Event triggered.

Oletustoiminnon estäminen

Jos kuitenkin liitämme onclicklinkkeihin (HTML: n atagi), voimme ehkä estää oletustoimintojen tapahtumisen:

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

Edellä olevassa esimerkissä estimme aelementin (avaavan linkin) oletuskäyttäytymisen soittopyynnön event.preventDefault()sisällä onclick.

MDN

Muut resurssit

jQuery .on () Tapahtumankäsittelijän liite