← Back to jQuery Course | Chapter 3: Events | Lesson 8 of 11

Event Propagation और Bubbling

Events normally target से उसके parent elements की तरफ़ move होते हैं।

In this page:

  1. Bubbling
  2. Stop Propagation
  3. Parent और Child
  4. Bubbling रोकना
  5. Delegated Events
Syntax
javascript 
$(selector).on("eventName", function (event) {
  event.stopPropagation();
});

Bubbling

किसी child element पर fire किया गया एक event उसके ancestor elements के through ऊपर की तरफ़ travel करता है जब तक कोई इसे रोके नहीं -- इस ऊपर की तरफ़ travel को bubbling कहा जाता है।

उदाहरण: Bubbling

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="outer"><button id="inner">Click</button></div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#outer").on("click", function() { $("#output").append($("<div>").text("Outer handler ran")); });
      $("#inner").on("click", function() { $("#output").append($("<div>").text("Inner handler ran")); });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Stop Propagation

किसी handler के अंदर event.stopPropagation() call करना event को ऊपर की तरफ़ जारी रहने से रोकता है, इसलिए parent elements पर उसी event के लिए attach किए गए किसी भी handler कभी नहीं चलते।

उदाहरण: Stop Propagation

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="outer"><button id="inner">Click</button></div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#outer").on("click", function() { $("#output").append($("<div>").text("Outer handler ran")); });
      $("#inner").on("click", function(event) {
        event.stopPropagation();
        $("#output").append($("<div>").text("Inner handler ran, stopped bubbling"));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Parent और Child

Bubbling की वजह से, किसी child element का अपना handler और उसके ancestors पर कोई भी handler दोनों उसी single click को respond कर सकते हैं, सबसे अंदरूनी element से बाहर की तरफ़ order में चलते हुए।

उदाहरण: Parent and Child

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    .btn { display:inline-block; padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border-radius:4px; cursor:pointer; font:13px sans-serif; }
    #resetBtn.btn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <span id="resetBtn" class="btn" role="button">Reset</span>
  <section id="demo">
    <div id="card"><button id="btn">Click</button></div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#btn").on("click", function() { $("#output").append($("<div>").text("1: button handler")); });
      $("#card").on("click", function() { $("#output").append($("<div>").text("2: card handler")); });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Bubbling रोकना

stopPropagation() वह tool है जो specifically तब इस्तेमाल करना चाहिए जब किसी child element का अपना action -- जैसे किसी clickable card के अंदर एक button -- card के अपने click handler को भी trigger नहीं करना चाहिए।

उदाहरण: Prevent Bubbling

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <div id="card">Card <button id="btn">Delete</button></div>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#card").on("click", function() { $("#output").append($("<div>").text("Card clicked")); });
      $("#btn").on("click", function(event) {
        event.stopPropagation();
        $("#output").append($("<div>").text("Button deleted, card click suppressed"));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>

Delegated Events

Event delegation जानबूझकर bubbling से लड़ने के बजाय उस पर निर्भर करता है: हर child पर एक handler attach करने के बजाय, आप एक shared parent पर एक handler attach करते हैं और यह पता लगाने के लिए bubbled event के target का इस्तेमाल करते हैं कि असल में किस child के साथ interact किया गया।

उदाहरण: Delegated Events

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <ul id="list"><li>Item 1</li></ul>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#list").on("click", "li", function(event) {
        $("#output").append($("<div>").text("Clicked: " + event.target.textContent));
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

jQuery Event Object क्या है · on() से Event Binding · Hover Event क्या है · Document Ready इवेंट

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. यह देखकर हैरान होना कि inner button click करने पर outer #outer handler भी चलता है, क्योंकि events default रूप से हर ancestor तक bubble होते हैं।
  2. event.stopPropagation() call करना और यह मान लेना कि यह default action भी cancel कर देता है, जैसे किसी link का navigate करना, जबकि उसके लिए event.preventDefault() चाहिए।
  3. किसी stray handler को fix करने के लिए stopPropagation() इस्तेमाल करना, जो delegated handlers और ऊपर के दूसरे code को भी block कर देता है जिन्हें legitimately उस event की ज़रूरत है।
🔒

Chapter Quiz — Complete all 11 topics to unlock

0/11 topics done

Complete these topics first:

← Previous Lesson The jQuery Event Object Next Lesson → Event Binding with on()

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.