6

所有，我知道在 Dom 2 级事件模型中，存在事件捕获和事件气泡。但我就是不知道 jquery 如何处理它们。所以我用这个.bind方法做了一些实验。这是我的代码。请查看它。

<script>
    $(function() {
        $('*').each(function(){
            var current = this;
            $(this).bind("dblclick",function(event){console.log('Capture for ' + current.tagName + '#'+ current.id +
                    ' target is ' + event.target.id);});

        });
    });
</script>
<body id="greatgrandpa">
    <div id="grandpa">
        <div id="pops">
            <img id="example" src="designer/templates/thumbnails/2ColsTemplate.PNG" />
        </div>
    </div>
</body>

输出如下所示

Capture for IMG#example target is example
Capture for DIV#pops target is example
Capture for DIV#grandpa target is example
Capture for BODY#greatgrandpa target is example
Capture for HTML# target is example

当我使用event.stopPropagation();事件处理程序时，将停止冒泡dblclick事件。

但我有 2 个问题。根据日志写入顺序，我猜测该bind方法使事件在事件气泡中（从 dom 的底部到顶部）而不是在事件捕获（从 dom 的顶部到底部）中触发。另一个问题是是否有可能在事件捕获期间触发事件？谢谢。

谢谢。

4

2 回答 2

11

jQuery 只支持事件冒泡阶段，不支持事件捕获阶段，尤其是因为长期以来 IE 不支持捕获。您的代码向您显示的是冒泡，而不是捕获。

捕获从document下到发生事件的元素；然后冒泡在元素上开始并冒泡到document另一个，这就是为什么您按照显示的顺序看到事件（这是冒泡阶段）。

于 2013-03-18T08:23:14.783 回答
0

前面的答案是正确的。但是，有一个简单的解决方法。要获得相同的有效结果，您可以停止传播以结束事件冒泡，在目标的父对象上触发事件，然后执行所需的代码，以便它在父对象上的事件之后发生。

对于您的示例，如果您想有效地反转处理程序的执行：

    $('*').each(function(){
        var current = this;
        $(this).bind("dblclick",function(event){

               // stop the event propagation
               event.stopPropagation();

               // execute allow the event to be executed on parent objects
               var parent = $(event.target).parent(); 
               if(parent) {  
                   parent.dblclick(); 
               }


               console.log('Capture for ' + current.tagName + '#'+ current.id +
                ' target is ' + event.target.id);});

    });

这种方法的一个缺点是，如果已使用捕获事件处理程序定义了父元素，则捕获将已经发生，并且在父元素上调用事件将导致捕获处理程序重新执行。因此，仅当您知道或控制在目标的所有父元素上声明的事件时才应使用此方法。

于 2014-07-25T16:34:32.533 回答