Metode dispatchEvent

Die metode dispatchEvent laat toe om 'n gebeurtenis na te boots op 'n element. Waarom is dit nodig: jy kan 'n gebruiker se druk op 'n knoppie naboots, 'n poging om 'n vorm te stuur, en so meer. Hierdie gebeurtenis sal nie verskil van 'n ware een nie, behalwe vir die eienskap event.isTrusted. Jy kan selfs gebeurtenisse skep met nie-standaard (deur jou verzonne) name en dit dan op die regte oomblik roep. Die metode word toegepas op die element waarop die gebeurtenis uitgelok moet word. As parameter neem die metode die gebeurtenis (objek), geskep met behulp van die konstruktor new Event.

Sintaksis

javascriptelement.dispatchEvent(event);

Voorbeeld

Kom ons sê ons het 'n knoppie. Wanneer hierdie knoppie gedruk word, word 'n boodskap vertoon. Kom ons maak dit so dat wanneer die muis oor die knoppie beweeg, dink die knoppie dat daar op dit geklik is:

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

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

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

button.addEventListener('mouseover', function() {
  let clickEvent = new Event('click'); // skep gebeurtenis
  this.dispatchEvent(clickEvent); // boots klik op knoppie na
});

Результат:

Voorbeeld

Jy kan jou eie gebeurtenisse skep (met jou eie naam) en dit dan op die regte oomblik aktiveer. Kom ons koppel 'n gebeurtenis showMessage aan die knoppie en aktiveer hierdie gebeurtenis wanneer die muis daaroor beweeg:

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

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

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

button.addEventListener('mouseover', function() {
  let showMessageEvent = new Event('showMessage'); // skep gebeurtenis
  this.dispatchEvent(showMessageEvent); // veroorsaak dat die gebeurtenis plaasvind
});

Результат: