ऑडियो और वीडियो ईवेंट बबल क्यों नहीं करते?

Question

मैं सोच रहा था कि मेरा कुछ जावास्क्रिप्ट तब तक काम नहीं करेगा जब तक मुझे लगा कि ऑडियो घटनाओं ने डीओएम पेड़ को बुलबुला नहीं किया था, उदाहरण के लिए timeupdate -event।

क्या ऑडियो-और वीडियो-टैग बबल की घटनाओं को न देने के लिए कोई तर्क है?

Answer 1

घटना बुलबुले मौजूद होने का कारण यह है कि इस तत्व का उद्देश्य लक्षित तत्व का अस्पष्ट प्रश्न हल करता है। इसलिए, यदि आप एक div पर क्लिक करते हैं, तो क्या आप div, या उसके माता-पिता पर क्लिक करना चाहते थे? अगर बच्चे के पास क्लिक हैंडलर संलग्न नहीं है, तो यह माता-पिता की जांच करता है, और इसी तरह। मुझे यकीन है कि आप जानते हैं कि यह कैसे काम करता है।

ऑडियो ईवेंट बबल नहीं होने का कारण यह है क्योंकि वे किसी भी अन्य तत्व पर समझ में नहीं आते हैं। ऑडियो तत्व पर timeupdate ट्रिगर करते समय कोई अस्पष्टता नहीं है चाहे वह ऑडियो तत्व या उसके मूल div के लिए है, इसलिए इसे बबल करने की कोई आवश्यकता नहीं है।

आप बुदबुदाती here

घटना प्रतिनिधिमंडल

घटना प्रतिनिधिमंडल घटना की पूरी इतिहास पढ़ सकता है अभी भी घटना के कैप्चरिंग चरण का उपयोग करके भी संभव है। सीधे शब्दों में जो इस तरह दिखता है addEventListener के लिए तीसरा तर्क के रूप में सच्चा जोड़ें:

document.addEventListener('play', function(e){ 
    //e.target: audio/video element 
}, true); 

ध्यान दें, कि इस घटना बुलबुला नहीं करता है, लेकिन डोम पेड़ नीचे चला जाता है और stopPropagation साथ रोका नहीं जा सकता।

यदि आप jQuery के .on/.off विधियों के साथ इसका उपयोग करना चाहते हैं (उदाहरण के लिए नामस्थान और अन्य jQuery ईवेंट एक्सटेंशन)। निम्नलिखित समारोह, webshim library रूप ले लिया, उपयोगी हो जाना चाहिए:

$.createEventCapturing = (function() { 
    var special = $.event.special; 
    return function (names) { 
     if (!document.addEventListener) { 
      return; 
     } 
     if (typeof names == 'string') { 
      names = [names]; 
     } 
     $.each(names, function (i, name) { 
      var handler = function (e) { 
       e = $.event.fix(e); 

       return $.event.dispatch.call(this, e); 
      }; 
      special[name] = special[name] || {}; 
      if (special[name].setup || special[name].teardown) { 
       return; 
      } 
      $.extend(special[name], { 
       setup: function() { 
        this.addEventListener(name, handler, true); 
       }, 
       teardown: function() { 
        this.removeEventListener(name, handler, true); 
       } 
      }); 
     }); 
    }; 
})(); 

उपयोग:

$.createEventCapturing(['play', 'pause']); 

$(document).on('play', function(e){ 
    $('audio, video').not(e.target).each(function(){ 
     this.pause(); 
    }); 
});