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 करना बंद कर देगी।
Hi ! I'm Rahul Kumar Rajput founder of learnhindituts.com. I'm a software developer having more than 4 years of experience. I love to talk about programming as well as writing technical tutorials and blogs that can help to others. I'm here to help you navigate the coding cosmos and turn your ideas into reality, keep coding, keep learning :)
Get connected with me. :) LinkedIn Twitter Instagram Facebook
