HTML DOM addEventListener() मेथड का इस्तेमाल इवेंट हैंडलर को निर्दिष्ट एलिमेंट से अटैच करने के लिए किया जाता है।
निम्नलिखित वाक्य रचना है -
element.addEventListener(event, function, capture)
ऊपर, पैरामीटर में शामिल हैं -
- घटना: घटना का नाम। आवश्यक है।
- फ़ंक्शन: घटना होने पर चलाने के लिए कार्य। आवश्यक है।
- कैप्चर करें: क्या ईवेंट को कैप्चरिंग चरण में निष्पादित किया जाना चाहिए। यह एक बूलियन मान की जाँच करता है और प्रदर्शित करता है; सही या गलत।
आइए अब DOM addEventListener() मेथड को लागू करने के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h2>Demo Heading</h2>
<button id="btn">Click</button>
<p id="myid"></p>
<script>
var x = document.getElementById("btn");
x.addEventListener("mouseover", one);
x.addEventListener("click", two);
function one() {
document.getElementById("myid").innerHTML += "Button hovered! "
}
function two() {
document.getElementById("myid").innerHTML += "!!Button Clicked!! "
}
</script>
</body>
</html> आउटपुट
अब, यदि आप क्लिक करेंगे, तो "बटन क्लिक किया गया" संदेश प्रदर्शित होगा। माउस पर बटन को मँडराते हुए, निम्न पाठ प्रदर्शित होगा:"बटन होवर" -
