Perché non si verificano eventi audio e video?

Mi stavo chiedendo perché alcuni miei javascript non funzionassero fino a quando non ho capito che gli eventi audio non erano in bolla sull’albero DOM, ad esempio il timeupdate .

C’è una logica per non lasciare che gli eventi della bolla dei tag audio e video?

Il motivo per cui esiste un bubbling di eventi è quello di risolvere l’ambigua domanda su quale elemento sia il target previsto dell’evento. Quindi, se fai clic su un div, intendi fare clic sul div o sul suo genitore? Se il bambino non ha un gestore di clic collegato, controlla il genitore e così via. Sono sicuro che sai come funziona.

Il motivo per cui gli eventi audio non sono chiari è perché non hanno senso su nessun altro elemento. Non c’è alcuna ambiguità quando si triggers un timeupdate su un elemento audio, indipendentemente dal fatto che sia pensato per l’elemento audio stesso o per il suo genitore div, quindi non c’è bisogno di contenerlo.

Puoi leggere una storia più completa dell’evento che bolle qui

Delegazione di eventi

La delega degli eventi è ancora ansible utilizzando la fase di acquisizione dell’evento. Aggiungi semplicemente true come terzo argomento per addEventListener che assomiglia a questo:

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

Nota che questo evento non bolle, ma scende lungo l’albero del DOM e non può essere fermato con stopPropagation .

Nel caso in cui si desidera utilizzare questo con i metodi .on / .off di jQuery (ad esempio per avere il namespacing e altre estensioni di eventi jQuery). La seguente funzione, presa dalla libreria webshim , dovrebbe diventare utile:

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

Uso:

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