What is Event Delegation In JavaScript in hindi

What is Event Delegation in hindi

Introduction

हेलो दोस्तों आज हम इस post में Event Delegation के बारे में जानगे की Event delegation क्या है? और वह कैसे work करता है!.

What is Event Delegation In JavaScript in Hindi?

Event delegation एक technique है जिसमे हम एक parent element पर event listener लगाते हैं, और जब उसके अंदर कोई child element पर event जैसे की click करता है तो parent element उस event को handle करता है!. इससे हमारे code का size छोटा होता है और performance भी improve होती है, खास कर जब हमारे paas बहुत सारे click या दूसरे elements हो!.

Event Delegation कैसे काम करता है?

Event delegation event bubbling mechanism का उसे करता है, जिसमे event child element से parent element की तरफ bubble करता है!. मतलब जब कोई event जैसे click किसी element पे होता है, तो वो event अपने parent elements तक propagate (bubble) होता है!. Event delegation में हम इस event bubbling का फायदा उठाते हैं!.
मतलबल की Event delegation, event babling पर depend करता है जब कोई event किसी child element पर trigger होता है वह buble होकर उसके parent और root element तक जाता है! ईस process का इस्तेमाल करके parent element पर listerner लगते है और event के target से पता लगते है की कोन से child element active था या event trigger किया गया था!.

Event Bubbling

जब एक event trigger होता है जैसे की click, तो वो event child element से parent element की तरफ bubble करता है!. इस bubble-up process को use करते हुए, हम parent element पे listener लगा कर उस event को handle कर सकते हैं!.

Targeting Child elements

Parent element को पता चल जाता है की event किस child element पे हुआ है या हुवा था! event.target का use करके, और फिर उस child element के लिए specific actions perform करा सकते है!.

Action Perform

अगर click पर action perform match होता है तो उस पर specific modification करा सकते है जैसे की current click element का background color change करना, text change करना, या specific content को hide/show करना जैसे action perform करा सकते है!.

Example:

Click evenet के जरिये हम Event delegation को समजने की कोसिस करते है!. मान लीजिये हमारे पास एक list है जिसमे buttons या list elements है, और आप हर button या list elements पे click event handle करना चाहते हैं बिना हर button या list elements पर अलग से event lister लगाए!.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation Example</title>
    <style>
        li {
            padding: 10px;
            cursor: pointer;
            margin: 5px;
        }
    </style>
</head>
<body>
    <ul id="itemList">
        <li class="action_item">Item 1</li>
        <li class="action_item">Item 2</li>
        <li class="action_item">Item 3</li>
        <li class="action_item">Item 4</li>
    </ul>

    <script>
        // Event delegation: attach the event listener to the parent (ul)
        document.getElementById('itemList').addEventListener('click', function(event) {
            // Check if the clicked element is an li
            if (event.target.tagName.toLowerCase() === 'li') {
                // Change the background color of the clicked li
                event.target.style.backgroundColor = 'yellow';
            }
        });
    </script>
</body>
</html>

ऊपर के example में देख सकते है हमने parent element के तोर पर <ul> element और <li> as child element use किया है!. और parent <ul> element में ID itemList जोड़ा है!. और हमने parent <ul> element पर click event attach किया है!. फिर हमने Event Targeting का इस्तेमाल करके event handler के भीतर हमने child element के <li> tagName का इस्तेमाल करके
event.target चेक किया है!. अगर current click <li> element tag हमें मिलता है तो हमने उसे element का background color change किया है!.

हम Button के click पर Event delegation event को समजने की कोसिस करेंगे!. मान लीजिये हमारे पास एक list है जिसमे buttons हैं, और आप हर button पे click event handle करना चाहते हैं बिना हर button पर अलग से event listener लगाए!.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Delegation Example</title>
    <style>
        li {
            padding: 10px;
            cursor: pointer;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="button-container">
        <button class="action-btn">Button 1</button>
        <button class="action-btn">Button 2</button>
        <button class="action-btn">Button 3</button>
    </div>
    <script>        
        const container = document.getElementById('button-container');        
        container.addEventListener('click', function(event) {            
            if (event.target && event.target.matches('button.action-btn')) {
                console.log(event.target);
                alert(`Button clicked😢 container (parent element)${event.target}`);
            }
        })
    </script>
</body>
</html>

ऊपर के example में देख सकते है की जब user किसी button पर click करता है, event.target उस button को refer करता है!. फिर हम check करते हैं की वो button class action-btn से match करता है या नहीं!. अगर condition match होती है, तो button का text show करते हैं alert के through.

 

 

 

Leave a Comment

Your email address will not be published. Required fields are marked *