javascript - Event.stopPropagation और event.preventDefault के बीच क्या अंतर है?




events (4)

वे एक ही काम कर रहे हैं ... क्या एक आधुनिक और एक पुराना है? या वे विभिन्न ब्राउज़रों द्वारा समर्थित हैं?

जब मैं खुद को ईवेंट (ढांचे के बिना) संभालता हूं तो मैं हमेशा दोनों के लिए जांच करता हूं और उपस्थित होने पर दोनों निष्पादित करता हूं। (मैं भी return false करता हूं, लेकिन मुझे लगता है कि node.addEventListener जुड़ी घटनाओं के साथ काम नहीं करता है)।

तो दोनों क्यों? क्या मुझे दोनों की जांच करनी चाहिए? या वास्तव में एक अंतर है?

(मुझे पता है, बहुत सारे प्रश्न हैं, लेकिन वे सभी तरह के हैं =))


यह here से उद्धरण here

event.preventDefault

PreventDefault विधि किसी ईवेंट को इसकी डिफ़ॉल्ट कार्यक्षमता को करने से रोकती है। उदाहरण के लिए, आप वर्तमान तत्व को छोड़ने से उस तत्व को क्लिक करना बंद करने के लिए ए तत्व पर preventDefault का उपयोग करेंगे:

//clicking the link will *not* allow the user to leave the page 
myChildElement.onclick = function(e) { 
    e.preventDefault(); 
    console.log('brick me!'); 
};

//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) { 
    console.log('you bricked my child!'); 
};

जबकि तत्व की डिफ़ॉल्ट कार्यक्षमता ब्रिकेट की गई है, घटना डीओएम को बुलबुला जारी रखती है।

Event.stopPropagation

दूसरी विधि, स्टॉपप्रॉपेशन, ईवेंट की डिफ़ॉल्ट कार्यक्षमता होने की अनुमति देता है लेकिन ईवेंट को प्रचार से रोकता है:

//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) { 
    e.stopPropagation();
    console.log('prop stop! no bubbles!'); 
};

//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) { 
    console.log('you will never see this message!'); 
};

स्टॉपप्रॉपैगेशन प्रभावी रूप से मूल तत्वों को अपने बच्चे पर दी गई घटना के बारे में जानने से रोकता है।

जबकि एक साधारण स्टॉप विधि हमें घटनाओं को जल्दी से संभालने की अनुमति देती है, लेकिन यह सोचना महत्वपूर्ण है कि आप वास्तव में बुलबुले के साथ क्या करना चाहते हैं। मैं शर्त लगाता हूं कि सभी डेवलपर वास्तव में चाहता है कि 90% समय से रोकें! एक घटना को गलत तरीके से "रोकना" आपको लाइन के नीचे कई परेशानियों का कारण बन सकता है; आपके प्लगइन्स काम नहीं कर सकते हैं और आपके तीसरे पक्ष के प्लगइन्स को ब्रिकेट किया जा सकता है। या फिर भी बदतर - आपका कोड किसी साइट पर अन्य कार्यक्षमता को तोड़ देता है।


quirksmode.org

घटना कैप्चरिंग

जब आप ईवेंट कैप्चरिंग का उपयोग करते हैं

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

element1 का इवेंट हैंडलर पहले आग लगाता है, तत्व 2 की घटना हैंडलर आखिरी आग लगती है।

घटना बुलबुले

जब आप ईवेंट बबलिंग का उपयोग करते हैं
               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

element2 के ईवेंट हैंडलर पहले आग लगते हैं, तत्व 1 की घटना हैंडलर आखिरी आग लगती है।

डब्ल्यू 3 सी इवेंट मॉडल में होने वाली कोई भी घटना पहली बार तब तक कब्जा कर लेती है जब तक यह लक्ष्य तत्व तक पहुंच जाती है और फिर फिर से बुलबुले हो जाती है

                 | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

https://www.w3.org/TR/DOM-Level-2-Events/events.html

यदि कैप्चरिंग इवेंट लिस्टर घटना से आगे की प्रसंस्करण को रोकने की इच्छा रखता है तो यह इवेंट इंटरफ़ेस की स्टॉपप्रॉपेशन विधि को कॉल कर सकता है। यह घटना के आगे प्रेषण को रोक देगा, हालांकि एक ही पदानुक्रम स्तर पर पंजीकृत अतिरिक्त EventListeners अभी भी घटना प्राप्त करेंगे। एक बार एक घटना की रोकथामप्रॉपेशन विधि कहने के बाद, उस विधि को और कॉल का कोई अतिरिक्त प्रभाव नहीं पड़ता है। यदि कोई अतिरिक्त कैप्चरर्स मौजूद नहीं है और रोकेंप्रॉपेशन नहीं कहा गया है, तो ईवेंट उपयुक्त ईवेंटलिस्टर्स को लक्ष्य पर ही ट्रिगर करता है।

और बुलबुले के लिए:

कोई इवेंट हैंडलर इवेंट इंटरफ़ेस की स्टॉपप्रॉपैगेशन विधि को कॉल करके आगे इवेंट प्रचार को रोकने का विकल्प चुन सकता है। यदि कोई इवेंट लिस्टनर इस विधि को कॉल करता है, तो वर्तमान EventTarget पर सभी अतिरिक्त ईवेंटलिस्टर्स ट्रिगर किए जाएंगे लेकिन उस स्तर पर बुलबुले समाप्त हो जाएंगे। रोकने के लिए केवल एक कॉल आगे बुलबुला रोकने के लिए प्रजनन की आवश्यकता है।

उदाहरण :

एचटीएमएल

<div id="a">
    <a id="b" href="http://www.google.com" target="_blank">google.com</a>
</div>
<p id="c"></p>

जावास्क्रिप्ट

var el = document.getElementById("c");
function captureOnClickA(e){
    el.innerHTML += "DIV event capture<br>";
}
function captureOnClickB(e){
    el.innerHTML += "A event capture<br>";
}
function bubblingOnClickA(e){
    el.innerHTML += "DIV event bubbling<br>";
}
function bubblingOnClickB(e){
    el.innerHTML += "A event bubbling<br>";
}
document.getElementById("a").addEventListener("click",captureOnClickA, true);
document.getElementById("b").addEventListener("click",captureOnClickB, true);
document.getElementById("a").addEventListener("click",bubblingOnClickA, false);
document.getElementById("b").addEventListener("click",bubblingOnClickB, false);

Demo , इस उदाहरण में चार इवेंट श्रोता निष्पादित किए जाते हैं, और ब्रॉवर में एक नया टैब खोला जाता है। आउटपुट है:

DIV event capture
A event capture
A event bubbling
DIV event bubbling

पहले फंक्शन को बदलना:

function captureOnClickA(e){
    el.innerHTML += "DIV event capture<br>";
    e.stopPropagation();
}

इस आउटपुट में परिणाम होगा:

DIV event capture

जिसका अर्थ है कि घटना के नीचे की ओर बढ़ना बंद हो गया है और इसके ऊपर के प्रचार भी हैं। Demo लेकिन यह टैब को खोलने से नहीं रोकेगा।

stopPropagation() को जोड़ना

function captureOnClickB(e){
    el.innerHTML += "A event capture<br>";
    e.stopPropagation();
}

Demo , या

function bubblingOnClickB(e){
    el.innerHTML += "A event bubbling<br>";
    e.stopPropagation();
}

Demo , परिणामस्वरूप एक ही आउटपुट होगा क्योंकि वे वर्तमान EventTarget पर हैं:

DIV event capture
A event capture
A event bubbling

इन दो मामलों में, घटना माता-पिता को बुलबुले से रोका। इसके अलावा ये दोनों टैब को खोलने से नहीं रोकेगा। टैब को खोलने से रोकने के लिए हमें डिफ़ॉल्ट ब्राउज़र कार्रवाई को रोकने के लिए preventDefault() का उपयोग करने की आवश्यकता है:

function captureOnClickA(e){
    el.innerHTML += "DIV event capture<br>";
    e.stopPropagation();
    e.preventDefault();
}

अब टैब नहीं खुल जाएगा और ईवेंट श्रोता में से केवल एक ही निष्पादित किया जाएगा। Demo


stopPropagation घटना घटना को stopPropagation करने से घटना को रोक देता है।

preventDefault उस ईवेंट पर ब्राउज़र को डिफ़ॉल्ट क्रिया को रोकता है।

मान लें कि आपके पास है

<div id="foo">
 <button id="but" />
</div>

$("#foo").click(function() {
   // mouse click on div
});

$("#but").click(function(ev) {
   // mouse click on button
   ev.stopPropagation();
});

उदाहरण

$("#but").click(function(event){
  event.preventDefault();
 });


$("#foo").click(function(){
 alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

$("#but").click(function(event){
  event.stopPropagation();
 });


$("#foo").click(function(){
 alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

stopPropagation साथ केवल बटन हैंडलर पर क्लिक किया जाता है और divs क्लिक हैंडलर कभी आग नहीं करता है।

जहां आप केवल डीफॉल्ट को रोकते हैं, केवल ब्राउज़र डिफ़ॉल्ट कार्रवाई बंद हो जाती है लेकिन div के क्लिक हैंडलर अभी भी आग लगती है।

MDN और MSDN से डीओएम इवेंट ऑब्जेक्ट्स पर कुछ दस्तावेज़ नीचे दिए गए हैं

MDN:

आईई 9 और एफएफ के लिए आप केवल रोकथाम और रोकथाम का उपयोग कर सकते हैं।

IE8 का समर्थन करने के लिए और stopPropagation साथ cancelBubble और stopPropagation साथ preventDefault को returnValue


विवरण झूठा है;

return false; जब आप इसे कॉल करते हैं तो 3 अलग-अलग चीजें होती हैं:

  1. event.preventDefault() - यह ब्राउज़र डिफ़ॉल्ट व्यवहार को रोकता है।
  2. event.stopPropagation() - यह घटना को डीओएम को प्रचारित करने (या " event.stopPropagation() ") से रोकता है।
  3. कॉलबैक निष्पादन रोकता है और कॉल करते समय तुरंत लौटाता है।

ध्यान दें कि यह व्यवहार सामान्य (गैर-jQuery) ईवेंट हैंडलर से अलग है, जिसमें विशेष रूप से, return false घटना को बुलबुले से रोक नहीं देती है।

चूक को रोकें();

preventDefault(); एक बात करता है: यह ब्राउज़र डिफ़ॉल्ट व्यवहार को रोकता है।

उनका उपयोग कब करें?

हम जानते हैं कि वे क्या करते हैं लेकिन उनका उपयोग कब करते हैं? बस यह निर्भर करता है कि आप क्या हासिल करना चाहते हैं। preventDefault(); उपयोग करें preventDefault(); यदि आप डिफ़ॉल्ट ब्राउज़र व्यवहार को "बस" रोकना चाहते हैं। वापसी झूठी का प्रयोग करें; जब आप डिफ़ॉल्ट ब्राउज़र व्यवहार को रोकना चाहते हैं और ईवेंट को DOM को प्रचारित करने से रोकना चाहते हैं। ज्यादातर स्थितियों में जहां आप वापसी झूठी उपयोग करेंगे; आप वास्तव में क्या चाहते हैं preventDefault()

उदाहरण:

आइए उदाहरणों के साथ समझने की कोशिश करें:

हम शुद्ध जावास्क्रिप्ट उदाहरण देखेंगे

उदाहरण 1:

<div onclick='executeParent()'>
  <a href='https://.com' onclick='executeChild()'>Click here to visit .com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

उपर्युक्त कोड चलाएं, आप हाइपरलिंक देखेंगे '.com पर जाने के लिए यहां क्लिक करें' अब अगर आप उस लिंक पर क्लिक करते हैं तो आपको जावास्क्रिप्ट अलर्ट लिंक मिलेगा अगला अगला आपको जावास्क्रिप्ट अलर्ट div क्लिक किया जाएगा और तुरंत आपको रीडायरेक्ट कर दिया जाएगा .com।

उदाहरण 2:

<div onclick='executeParent()'>
  <a href='https://.com' onclick='executeChild()'>Click here to visit .com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

उपर्युक्त कोड चलाएं, आप हाइपरलिंक देखेंगे '.com पर जाने के लिए यहां क्लिक करें' अब अगर आप उस लिंक पर क्लिक करते हैं तो आपको जावास्क्रिप्ट अलर्ट लिंक मिलेगा अगला अगला आपको जावास्क्रिप्ट अलर्ट div मिलेगा अगला क्लिक करें आप हाइपरलिंक ' टेक्स्ट द्वारा प्रतिस्थापित '.com' पर जाने के लिए यहां क्लिक करें 'ईवेंट रोकें क्लिक करें' और आपको .com पर रीडायरेक्ट नहीं किया जाएगा। यह> event.preventDefault () विधि के लिए है जिसे हम डिफ़ॉल्ट क्लिक क्रिया को ट्रिगर करने से रोकने के लिए उपयोग करते हैं।

उदाहरण 3:

<div onclick='executeParent()'>
  <a href='https://.com' onclick='executeChild()'>Click here to visit .com</a>
</div>
<script>
  function executeChild() {
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

इस बार यदि आप लिंक पर क्लिक करते हैं तो फ़ंक्शन निष्पादित करें माता-पिता () को नहीं कहा जाएगा और आपको जावास्क्रिप्ट अलर्ट div नहीं मिलेगा इस बार क्लिक किया गया। यह हमारे कारण event.stopPropagation () विधि का उपयोग कर पैरेंट div को प्रचार को रोक रहा है। इसके बाद आप हाइपरलिंक 'स्टैक ओवरफ्लो डॉट कॉम पर जाने के लिए यहां क्लिक करें' टेक्स्ट द्वारा प्रतिस्थापित किया जाएगा 'क्लिक इवेंट निष्पादित किया जा रहा है' और तुरंत आपको .com पर रीडायरेक्ट कर दिया जाएगा। ऐसा इसलिए है क्योंकि हमने event.preventDefault () विधि का उपयोग करके इस बार ट्रिगर करने से डिफ़ॉल्ट क्लिक कार्रवाई को रोक नहीं दिया है।

उदाहरण 4:

<div onclick='executeParent()'>
  <a href='https://.com' onclick='executeChild()'>Click here to visit .com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

यदि आप लिंक पर क्लिक करते हैं, तो फ़ंक्शन executeParent () को कॉल नहीं किया जाएगा और आपको जावास्क्रिप्ट अलर्ट नहीं मिलेगा। यह हमारे कारण event.stopPropagation () विधि का उपयोग कर पैरेंट div को प्रचार को रोक रहा है। इसके बाद आप हाइपरलिंक 'स्टैक ओवरफ्लो डॉट कॉम पर जाने के लिए यहां क्लिक करें' टेक्स्ट 'प्रतिस्थापित ईवेंट पर क्लिक करें' द्वारा प्रतिस्थापित करेंगे और आपको .com पर रीडायरेक्ट नहीं किया जाएगा। ऐसा इसलिए है क्योंकि हमने event.preventDefault () विधि का उपयोग करके इस बार ट्रिगर करने से डिफ़ॉल्ट क्लिक कार्रवाई को रोक दिया है।

उदाहरण 5:

बदले में झूठ के लिए मेरे पास तीन उदाहरण हैं और सभी एक ही चीज़ (केवल झूठी वापसी) कर रहे हैं, लेकिन वास्तव में परिणाम काफी अलग हैं। उपर्युक्त में से प्रत्येक में वास्तव में क्या होता है।

मामलों:

  1. एक इनलाइन इवेंट हैंडलर से झूठ लौटने से ब्राउजर को लिंक पते पर नेविगेट करने से रोकता है, लेकिन यह घटना को डीओएम के माध्यम से प्रचार करने से नहीं रोकता है।
  2. एक jQuery ईवेंट हैंडलर से झूठ लौटने से ब्राउजर को लिंक पते पर नेविगेट करने से रोकता है और यह घटना को डीओएम के माध्यम से प्रसारित करने से रोकता है।
  3. एक नियमित डोम घटना हैंडलर से झूठी वापसी पूरी तरह से कुछ नहीं करता है।

सभी तीन उदाहरण देखेंगे।

  1. इनलाइन वापसी झूठी।

<div onclick='executeParent()'>
  <a href='https://.com' onclick='return false'>Click here to visit .com</a>
</div>
<script>
  var link = document.querySelector('a');

  link.addEventListener('click', function() {
    event.currentTarget.innerHTML = 'Click event prevented using inline html'
    alert('Link Clicked');
  });


  function executeParent() {
    alert('Div Clicked');
  }
</script>

  1. एक jQuery घटना हैंडलर से झूठी वापसी।

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='https://.com'>Click here to visit .com</a>
</div>
<script>
  $('a').click(function(event) {
    alert('Link Clicked');
    $('a').text('Click event prevented using return FALSE');
    $('a').contents().unwrap();
    return false;
  });
  $('div').click(function(event) {
    alert('Div clicked');
  });
</script>

  1. एक नियमित डोम घटना हैंडलर से झूठी वापसी।

<div onclick='executeParent()'>
  <a href='https://.com' onclick='executeChild()'>Click here to visit .com</a>
</div>
<script>
  function executeChild() {
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
    return false
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

आशा है कि ये उदाहरण स्पष्ट हैं। इन सभी उदाहरणों को एक HTML फ़ाइल में निष्पादित करने का प्रयास करें ताकि वे यह देख सकें कि वे कैसे काम करते हैं।





stoppropagation