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

问题描述

我想知道为什么我的一些JavaScript是行不通的，直到我盘算了一下，声音事件并没有泡沫了DOM树，如在 timeupdate -event。

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，你的意思是单击该分区，或其父？如果孩子没有一个单击处理程序连接，那么它会检查父，等等。我敢肯定，你知道如何工作的。

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 音频元素无论是意味着音频元素本身或其母公司股利，所以没有必要去泡就可以了。

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.

您可以阅读活动有更全面的历史这里冒泡

You can read a fuller history of event bubbling here

事件代表团

事件代表团仍然有可能利用该事件的捕获阶段。只需添加真正作为的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的。对/ .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屋！