jQuery tapahtumat

jQuery on suunniteltu erityisesti tapahtumien käsittelyä varten.

jQuery-tapahtumafunktio

jQuery-tapahtumametodit ovat jQuery:n keskeisiä funktioita.

Tapahtumankäsittelijä tarkoittaa metodia, joka kutsutaan HTML:n tapahtumien sattuessa. Terminus "tapahtuma käynnistyy" (tai "inspiroi") käytetään usein.

Yleensä jQuery-koodi sijoitetaan <head>-osion tapahtumankäsittelijöihin:

Esimerkki

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>Tämä on otsikko</h2>
<p>Tämä on kappale.</p>
<p>Tämä on toinen kappale.</p>
<button>Click me</button>
</body>
</html>

Kokeile itse

Yllä olevassa esimerkissä funktio kutsutaan, kun painikkeen klikkaustapahtuma käynnistetään:

$("button").click(function() {  // jokin koodi... } )

Tämä menetelmä piilottaa kaikki <p>-elementit:

$("p").hide();

Yksittäisessä tiedostossa olevat funktiot

Jos verkkosivustosi sisältää monia sivuja ja haluat, että jQuery-funktiosi ovat helppoja ylläpitää, siirrä jQuery-funktiosi erilliseen .js-tiedostoon.

Kun esitellään jQuery:tä oppaassa, funktiot lisätään suoraan <head>-osioon. Kuitenkin, niiden sijoittaminen erilliseen tiedostoon on parempi, kuten tässä (tiedoston viittaus src-ominaisuudella):

Esimerkki

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery:n nimen konflikti

jQuery käyttää $-symbolia jQuery:n lyhytnimisenä.

Joissakin muissa JavaScript-kirjastoissa olevissa funktioissa (esim. Prototype) käytetään myös $-symbolia.

jQuery ratkaisee tämän ongelman noConflict()-menetelmän avulla.

var jq=jQuery.noConflict()，auttaa sinua käyttämään omaa nimeäsi (esim. jq) korvaamaan $-symbolin.

Kokeile itse

Johtopäätös

Koska jQuery on suunniteltu erityisesti HTML-tapahtumien käsittelyyn, seuraavien periaatteiden noudattaminen tekee koodistasi sopivampaa ja helpommin ylläpidettävää:

  • Sijoita kaikki jQuery-koodi tapahtumankäsittelijään
  • Sijoita kaikki tapahtumankäsittelijät dokumentin valmiustapahtumahallintaan
  • Sijoita jQuery-koodi erilliseen .js-tiedostoon
  • Jos nimen konflikti on olemassa, nimeä jQuery-kirjasto uudelleen

jQuery tapahtumat

Tässä on joitakin jQuery:n tapahtumametodeja esimerkkeinä:

Tapahtumafunktio Sidota funktioon
$(dokumentti).ready(function) Sidota funktion dokumentin valmiustapahtumaan (kun dokumentti on ladattu)
$(valitsin).click(function) Laheta tai sidota funktion valitun elementin klikkaustapahtumaan
$(valitsin).dblclick(function) Laheta tai sidota funktion valitun elementin tuplaklikkaustapahtumaan
$(valitsin).focus(function) Laheta tai sidota funktion valitun elementin saamaan keskittyneisyyteen
$(valitsin).mouseover(function) Laheta tai sidota funktion valitun elementin hiiren osoittimen ylitystapahtumaan

Jos haluat täyden dokumentaation, vieraile jQuery tapahtumadokumentaatio.