एचटीएमएल डोम तत्व addEventListener ()
उदाहरण
एक क्लिक इवेंट को <button> एलीमेंट में जोड़ें:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
अधिक कॉम्पैक्ट कोड:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
नीचे और अधिक उदाहरण।
परिभाषा और उपयोग
addEventListener()
विधि एक ईवेंट हैंडलर को तत्व से जोड़ती है ।
यह सभी देखें:
Element.removeEventListener () विधि
document.addEventListener() विधि
document.removeEventListener() विधि
ट्यूटोरियल
वाक्य - विन्यास
element.addEventListener(event, function, useCapture)
मापदंडों
Parameter | Description |
event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
function | Required. The function to run when the event occurs. |
useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
प्रतिलाभ की मात्रा
कोई नहीं |
और ज्यादा उदाहरण
आप एक ही तत्व में कई ईवेंट जोड़ सकते हैं:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
आप एक ही तत्व में विभिन्न ईवेंट जोड़ सकते हैं:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
पैरामीटर मान पास करने के लिए, "अनाम फ़ंक्शन" का उपयोग करें:
element.addEventListener("click", function() {
myFunction(p1, p2);
});
<बटन> तत्व की पृष्ठभूमि का रंग बदलें:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
बबलिंग और कैप्चरिंग के बीच का अंतर:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
एक ईवेंट हैंडलर निकालें:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
ब्राउज़र समर्थन
element.addEventListener()
एक डोम लेवल 2 (2001) फीचर है।
यह सभी ब्राउज़रों में पूरी तरह से समर्थित है:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |