为什么音频和视频事件不冒泡? [英] Why don't audio and video events bubble?

问题描述

我想知道为什么我的一些 Javascript 无法工作，直到我发现音频事件没有在 DOM 树上冒泡，例如timeupdate-事件.

I was wondering why some Javascript of mine would not work until I figured that the audio events did not bubble up the DOM tree, e.g. the timeupdate-event.

不让音频和视频标签泡沫的事件有理由吗?

Is there a rationale for not letting the events of the audio- and video-tag bubble?

推荐答案

事件冒泡之所以存在，是为了解决哪个元素是事件的预期目标这一模棱两可的问题.那么，如果您单击一个 div，您的意思是单击该 div 还是它的父级?如果子级没有附加点击处理程序，则它会检查父级，依此类推.我相信你知道它是如何工作的.

The reason why event bubbling exists is solve the ambiguous question of which element is the intended target of the event. So, if you click on a div, did you mean to click the div, or its parent? If the child doesn't have a click handler attached, then it checks the parent, and so on. I'm sure you know how that works.

音频事件不会冒泡的原因是因为它们对任何其他元素都没有意义.当您在音频元素上触发 timeupdate 时，无论它是用于音频元素本身还是其父 div，都没有歧义，因此无需冒泡.

The reason why audio events don't bubble is because they don't make sense on any other element. There's no ambiguity when you trigger a timeupdate on an audio element whether it's meant for the audio element itself or its parent div, so there's no need to bubble it.

您可以在此处

事件委托

通过利用事件的捕获阶段，事件委托仍然是可能的.只需添加 true 作为 addEventListener 的第三个参数，如下所示:

Event delegation is still possible by utilizing the capturing phase of the event. Simply add true as the third argument for addEventListener which looks like this:

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

请注意，此事件不会冒泡，而是沿 DOM 树向下移动，并且无法通过 stopPropagation 停止.

Note, that this event doesn't bubble, but goes down the DOM-tree and can't be stopped with stopPropagation.

如果您想将其与 jQuery 的 .on/.off 方法一起使用(例如具有命名空间和其他 jQuery 事件扩展).以下函数来自 webshim 库，应该会变得有用:

In case you want to use this with the jQuery's .on/.off methods (for example to have namespacing and other jQuery event extensions). The following function, taken form the webshim library, should become usefull:

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

这篇关于为什么音频和视频事件不冒泡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！