爲什麼不影響音頻和視頻事件？

Question

我想知道爲什麼我的一些JavaScript不工作，直到我認爲音頻事件沒有讓DOM樹冒泡，例如timeupdate -event。

有沒有理由不讓音頻和視頻標籤泡泡的事件？

Answer 1

事件冒泡存在的原因是解決了哪個元素是事件預期目標的模糊問題。所以，如果你點擊一個div，你的意思是點擊div或其父？如果孩子沒有連接點擊處理程序，那麼它會檢查父級，等等。我相信你知道那是如何工作的。

音頻事件不泡的原因是因爲它們對任何其他元素都沒有意義。當您在音頻元素上觸發timeupdate時，無論它是爲了音頻元素本身還是其父級div，都沒有歧義，因此不需要冒泡。

您可以閱讀事件的冒泡here

事件代表團

事件代表團更充分的歷史仍然有可能利用該事件的捕獲階段。只需添加真正作爲的addEventListener的第三個參數，看起來像這樣：

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

注意，該事件不會冒泡，但下降的DOM樹，並且不能與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(); 
    }); 
});