HTML DOM addEventListener() 方法

Pagsasaayos at paggamit

addEventListener() Ang paraan ay magdagdag ng event handler sa elemento.

Eksemplo

Halimbawa 1

Magdagdag ng click pangyayari sa <button> elemento:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Subukan Nang Personal

Halimbawa 2

Mas kasikatan na kodigo:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Subukan Nang Personal

Maaari mong mahanap ang higit pang halimbawa sa ibaba ng pahina.

Mga Tagapagtalastas

element.addEventListener(type, function, useCapture)

Parameter

Parameter Paglalarawan
type

Hindi kinakailangan. Ang pangalan ng pangyayari.

Huwag gumamit ng awalan ng "on".

Gumamit ng "click" sa halip ng "onclick".


Kompleto na Listahan ng DOM Events
function Hindi kinakailangan. Ang function na magsasagawa kapag mayroon pangyayari.
useCapture

Opsiyonal (default = false).

  • false - Ang tagapagpuna ay magsasagawa sa tanggapang pagkalat na panahon.
  • true - Ang tagapagpuna ay magsasagawa sa tanggapang panimulang panahon.

Halimbawa ng Pagbabalik

Wala.

Detalye ng Tekniko

Ang paraan na ito ay magdadagdag ng tinukoy na tagapagmasid ng pangyayari function sa koleksyon ng tagapagmasid ng pangyayari ng kasalukuyang bintana upang maiproseso ang tinukoy na uri ng pangyayari. type ang pangyayari. useCapture Para sa true, ang tagapagmasid ay nakarehistro bilang tagapagmasid ng pagk捕. useCapture Para sa false, ito ay nakarehistro bilang pangkaraniwang tagapagmasid ng pangyayari.

addEventListener() ay maaaring maitawid nang maraming beses, magparehistro ng maraming tagapagmasid ng pangyayari sa parehong bintana para sa isang uri ng pangyayari. Subalit dapat mag-ingat, ang DOM ay hindi maaring matukoy ang pagkakasunod-sunod ng pagtawag sa maraming tagapagmasid ng pangyayari.

Kapag ginamit ang isang tagapagmasid ng pangyayari function sa parehong bintana gamit ang parehong type at useCapture Parameter na nagpaparehistro nang dalawang beses, ang ikalawang pagpaparehistro ay maiiwan. Kapag pinag-aaral ang isang bintana sa isang pangyayari, kung saan napaparehistro ang isang bagong tagapagmasid ng pangyayari sa bintana, ang bagong tagapagmasid ng pangyayari ay hindi na papapakita para sa pangyayari.

Kapag ginamit ang Node.cloneNode() Paraan o Document.importNode() Hindi nagpapakopya ng mga tagapagmasid ng pangyayari na nakarehistro sa orihinal na bintana na nagpapakopya ng Document na bintana.

Ang paraan na ito ay din nasa Document at Window Ito ay nakadefinir ang mga bagay at gumagana katulad nito.

Higit pang halimbawa

Halimbawa 3

Maaari mong idagdag maraming pangyayari sa parehong elemento:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

Subukan Nang Personal

Halimbawa 4

Maaari mong idagdag ang iba't ibang pangyayari sa parehong elemento:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

Subukan Nang Personal

Halimbawa 5

Kung mayroon kang mga parametrong dapat ilipat, gamitin ang "Anonymous Function":

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

Subukan Nang Personal

Halimbawa 6

Palitan ang Background Color ng Elemento ng <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Subukan Nang Personal

Halimbawa 7

Pagkakaiba ng Bubbling at Capturing:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Subukan Nang Personal

Halimbawa 8

Tanggalin ang Event Handler:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Subukan Nang Personal

Browser Support

element.addEventListener() Ito ay DOM Level 2 (2001) na Function.

Lahat ng mga Browser ay ganap na sumusuporta sa ito:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporta 9-11 Suporta Suporta Suporta Suporta

Mga Relatibong Pahina

Mga Elementong Method:

Mga Turo sa addEventListener() Method

Mga Turo sa removeEventListener() Method

Mga Dokumentong Method:

Mga Turo sa addEventListener() Method

Mga Turo sa removeEventListener() Method

Tuturo:

HTML DOM EventListener

Kompleto na Listahan ng DOM Events