dispatchEvent-metodi

Metodi dispatchEvent mahdollistaa tapahtuman simuloinnin elementillä. Miksi tämä on hyödyllistä: voidaan simuloida käyttäjän painikkeen painamista, lomakkeen lähetysyritystä ja niin edelleen. Tällöin tapahtuma ei eroa aidosta millään tavalla paitsi ominaisuudella event.isTrusted. Voidaan jopa luoda tapahtumia epästandardeilla (itsesi keksimillä) nimillä ja sitten kutsua niitä oikeaan hetkeen. Metodia sovelletaan elementtiin, jolle tapahtuma halutaan kutsua. Parametrina metodi saa tapahtuman (objektin), joka on luotu konstruktorilla new Event.

Syntaksi

javascriptelementti.dispatchEvent(tapahtuma);

Esimerkki

Oletetaan, että meillä on painike. Kun tätä painiketta painetaan, näytetään viesti. Tehdään niin, että kun hiiri viedään painikkeen päälle tämä painike luulee, että sitä on klikattu:

html<button id="button">painike</button>

javascriptlet button = document.querySelector('#button');

button.addEventListener('click', function() {
  alert('viesti');
});

button.addEventListener('mouseover', function() {
  let clickEvent = new Event('click'); // luodaan tapahtuma
  this.dispatchEvent(clickEvent); // simuloidaan klikkausta painikkeella
});

Результат:

Esimerkki

Voit luoda omia tapahtumia (omilla nimillään) ja sitten kutsua niitä oikeaan hetkeen. Liitetään painikkeelle tapahtuma showMessage ja hiiren viemisellä päälle laukaistaan tämä tapahtuma:

html<button id="button">painike</button>

javascriptlet button = document.querySelector('#button');

button.addEventListener('showMessage', function() {
  alert('viesti');
});

button.addEventListener('mouseover', function() {
  let showMessageEvent = new Event('showMessage'); // luodaan tapahtuma
  this.dispatchEvent(showMessageEvent); // kutsutaan tapahtuman laukeamista
});

Результат: