Question

所有，我知道在Dom level 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的底部到顶部）中触发，而不是在事件capature中（从dom顶部到底部）。另一个问题是，是否有可能在事件捕获期间触发事件？感谢。

感谢。

Answer 1

jQuery只支持事件冒泡阶段，而不是事件捕获阶段，尤其是因为很长一段时间，IE不支持捕获。您的代码向您展示的是冒泡，而不是捕获。

Capture从document向下移动到发生事件的元素;然后冒泡开始在元素上并再次冒泡到document，这就是为什么你按照你显示的顺序看到事件（这是冒泡阶段）。

Answer 2

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

如果你想有效地反转处理程序的执行，那么

就是你的例子：

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

    });

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

事件捕获或事件冒泡时触发的Jquery .bind事件

2 个答案: