なぜオーディオとビデオのイベントがバブルしないのですか？

Question

私は、オーディオイベントがDOMツリーをバブルアップしなかったと考えられるまで、私のJavaScriptのいくつかがうまくいかないのだろうと思っていました。 timeupdate -event。

オーディオタグとビデオタグのバブリングのイベントを許可しないという根拠はありますか？

Answer 1

イベントバブリングが存在する理由は、どの要素がイベントの対象となるのかのあいまいな問題を解決するためです。したがって、divをクリックすると、divまたはその親をクリックすることを意味しましたか？子にクリックハンドラが接続されていない場合は、親をチェックします。その仕組みが分かっていると思います。

オーディオイベントがバブルしない理由は、他の要素で意味をなさないためです。オーディオ要素のそれがオーディオ要素か親のdivかを問わず、オーディオ要素のtimeupdateをトリガするとあいまいさがないので、バブルする必要はありません。

あなたはイベントのキャプチャ段階を利用することにより、まだ可能であるhere

イベント委任

イベントの委任をバブリングイベントのより完全な歴史を読むことができます。このイベントはバブルはしませんが、DOMツリーをダウンし、stopPropagationで停止することができないこと、

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

注：単純に次のようになりますaddEventListenerをのための3番目の引数として真追加します。

これを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(); 
    }); 
});