addEventListener विधि

addEventListener विधि किसी तत्व पर ईवेंट हैंडलर्स नियत करने की अनुमति देती है। इसकी सहायता से, आप यह निर्दिष्ट कर सकते हैं, उदाहरण के लिए, किसी बटन पर क्लिक करने पर क्या करना है या टेक्स्ट फ़ील्ड में टेक्स्ट टाइप करते समय क्या करना है। पहले पैरामीटर में हम पास किए जाने वाले ईवेंट का प्रकार निर्दिष्ट करते हैं, दूसरे में - वह फ़ंक्शन, जो पहले पैरामीटर में निर्दिष्ट ईवेंट के बाद निष्पादित होगा। तीसरे वैकल्पिक पैरामीटर में हम ऑब्जेक्ट की विशेषताएँ (once, capture, passive) या useCapture पैरामीटर पास करते हैं।

सिंटैक्स

element.addEventListener('event type', function, [object characteristics]);
या
element.addEventListener('event type', function, [useCapture]);

उदाहरण

आइए ऐसा करें कि बटन पर क्लिक करने पर एक संदेश प्रदर्शित हो:

<input type="button" id="button" value="click me">

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

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

उदाहरण

आइए ऐसा कोड लिखें कि इनपुट में फोकस खोने पर उस इनपुट का टेक्स्ट वाला संदेश प्रदर्शित हो:

<input id="input" value="text">

let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	alert(this.value);
});

उदाहरण

आइए ऐसा करें कि बटन पर क्लिक करने पर संदेश केवल एक बार कंसोल में प्रदर्शित हो। इसके लिए हम दूसरे पैरामीटर का उपयोग करेंगे:

<input type="button" id="button" value="click me">

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

button.addEventListener('click',
	function() {
		console.log('message');
	},
	{
		once: true
	}
);

उदाहरण

passive पैरामीटर ईवेंट के प्रसंस्करण के दौरान event.preventDefault मेथड को कॉल करने पर प्रतिबंध लगाता है। आइए पिछले उदाहरण में event.preventDefault मेथड लागू करें, और साथ ही passive पैरामीटर में true मान निर्दिष्ट करें:

<input type="button" id="button" value="click me">

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

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('No message');
	},
	{
		passive: true
	}
);

कोड निष्पादित होने के बाद हमें निम्नलिखित संदेश दिखाई देंगे:

'No message';
'Unable to preventDefault inside passive event listener invocation.'

उदाहरण

useCapture पैरामीटर true मान पर आंतरिक तत्व से बाहरी तत्व तक ईवेंट्स के बबलिंग को दर्शाता है, false मान पर - बाहरी तत्व से आंतरिक तत्व तक। useCapture पैरामीटर पास करते समय इसका नाम छोड़ दिया जाता है और केवल true या false लिखा जाता है। आइए देखें कि पैरेंट और चाइल्ड तत्वों पर क्लिक करने पर ईवेंट्स कैसे बबल होते हैं:

<div id="parent">Parent
	<p id="child">Child</p>
</div>

#parent{
	width: 60px;
	padding: 10px;
	border: 1px solid red;
	text-align: center;
}
#child{
	width: 60px;
	marging-right: 40px;
	border: 1px solid blue;
	text-align: center;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('parent'), 
	true
);
child.addEventListener('click',
	() => alert('child'), 
	true
);

यह भी देखें

removeEventListener विधि,
जो तत्व से ईवेंट को अनबाइंड करती है