If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
पिछले Topics में आपने JavaScript Events और JavaScript Events Handling के बारे में पढ़ा , इस Topic में आप Event Listeners के बारे में पढ़ेंगे।
Basically Event Listeners , किसी selected Element में Event Attach या Detach करते हैं।
जैसा कि आपने पढ़ा कि Events आप कई तरह से Handle कर सकते हैं , HTML Attribute या DOM Property में Assign करके। इसके अलावा आप Event Listeners के Through किसी particular Element के लिए एक या एक से ज्यादा Events Add / Remove भी कर सकते हैं।
Element में Event Attach या Detach करने के लिए normally दो function use हैं -
addEventListener() Function किसी selected Element में Event Attach करता है।
selected_element.addEventListener(event_name, callback_function, event_bubbling);
event_name | required : First Parameter Event का name होता है जो कि mandatory है , जिसे Attach करना चाहते हैं , यहाँ event का name में on prefix नहीं करते हैं। For Eg. onclick की जगह सिर्फ click लिखते हैं और इसी तरह दूसरी events.
callback_function | required : Second Parameter Callback Function , ये भी mandatory है।
event_bubbling | optional : Third Parameter Event Bubbling है जो कि boolean value होती है , हालाँकि यह Optional है।
File : addEventListener.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript Add EventListener</title>
</head>
<body>
<button class="change_bg">You Clicked 0 Times</button>
<script type="text/javascript">
/*because we are getting Node List */
let button_elem = document.getElementsByClassName('change_bg')[0];
let number = 0;
button_elem.addEventListener('click', function()
{
button_elem.innerText = `You Clicked ${++number} Times`;
});
</script>
</body>
</html>removeEventListener किसी selected element में से Attach की हुई Event को Detach / Remove करता है।
File : removeEventListener.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript removeEventListener</title>
</head>
<body>
<button id="add_listener">You Clicked 0 Times</button>
<script type="text/javascript">
let add_listener_btn = document.getElementById('add_listener');
let number = 0;
/*add listener*/
add_listener_btn.addEventListener('click', function()
{
/*increment every time by one*/
number++;
/*remove click event listener if value is mora than 5*/
if(number <= 5)
{
add_listener_btn.innerText = `You Clicked ${number} Times`;
}
else
{
add_listener_btn.removeEventListener('click', function(){});
}
});
</script>
</body>
</html>दिए गए Example में जैसे ही number of clicks 5 से ज्यादा होंगे वैसे ही Button से click Event Listener Detach / Remove हो जायेगा और Button से click event work करना बंद कर देगी।