Neden ses ve video etkinlikleri kabarcıklanmıyor?

Question

Bazı javascript'lerin neden işitsel olayların DOM ağacını oluşturduğunu çözene kadar işe yaramayacağını merak ediyordum. timeupdate -event.

Ses ve video etiketi balonunun olaylarına izin vermemek için bir gerekçe var mı?

Answer 1

Olay köpürmenin var olmasının nedeni, hangi öğenin olayın amaçlanan hedefi olduğuna dair belirsiz soruyu çözmektir. Yani, eğer bir div'a tıklarsanız, div veya ebeveynini tıklatmak mı istediniz? Çocuğun bir tıklatma işleyicisi yoksa, üst öğeyi vb. Kontrol eder. Eminim bunun nasıl çalıştığını biliyorsun.

Ses olaylarının neden balonlaşmamasının nedeni, başka hiçbir öğede anlam ifade etmemeleridir. Ses elemanının kendisi veya ebeveyn div için bir ses öğesi üzerinde bir timeupdate'u tetiklediğinizde herhangi bir belirsizlik yoktur, bu yüzden onu kabarcıklamanıza gerek yoktur.

Etkinliğin yakalama aşaması kullanılarak mümkün hala here

Olay heyeti

Olay heyeti fokurdayan olayın bir daha dolgun geçmişini okuyabilir. Basitçe şöyle addEventListener üçüncü argüman olarak gerçek ekleyin:

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

Not, bu olay kabarcık oluşturmaz, ancak DOM ağacının iner ve stopPropagation ile durdurulamaz olduğunu.

Bunu jQuery'nin .on/.off yöntemleriyle kullanmak isterseniz (örneğin ad boşluğu ve diğer jQuery olay uzantılarına sahip olmak için). webshim library formu alınan aşağıdaki fonksiyonu, yararlı haline gelmelidir:

$.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); 
       } 
      }); 
     }); 
    }; 
})(); 

Kullanımı:

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

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