标签: event-bubbling

我是jQuery的新手,我正在尝试理解捕获和冒泡的概念.

我已经阅读了很多文章,但大多数都描述了Javascript的事件传播.

让我们假设我们有以下HTML代码:

<div id="outter">

        outter

        <div id="inner">

                inner
        </div>

</div>

捕获是我们沿着DOM元素走下去的阶段,冒泡就是我们上升的时候.

在Javascript中,您可以决定使用哪种方式(使用true或false参数):

element.addEventListener('click',doSomething,true) --> capture phase
element.addEventListener('click',doSomething,false)  --> bubble phase

有没有类似的jQuery来表示除JavaScript方式之外的哪种方式？

jQuery也使用默认阶段吗？比如泡泡？

因为我使用以下代码来测试这个:

CSS

<style>

  div {
            border: 1px solid green;
            width: 200px;

       }

</style>

jQuery的

<script>

    $(document).ready(function(){

        $('div').click(function(){
            $(this).animate({'width':'+=10px'},{duration: 3000})
        });

    });

</script>

看来,当我点击outter div时,只有那个div动画到更大的div.当我点击内部div时,两个div都会生成更大的div.

我不知道我是不是错了,但是这个测试表明默认的浏览器传播方法是冒泡的.

如果我错了,请纠正我.

<div id="largeArea" v-on:click="do_X">
    <button>Button</button>
</div>

所以我在Vue中有这个问题,当我点击按钮时我不想触发"do_X",尽管它是largeArea的一部分.

假设我们有这样的HTML结构

<div id="container">
    <div id="nested">
        <span id="someElement"></span>
    </div>
</div>

......我们的目标是要对一个事件监听器#container 只!所以,我们绑定一个监听器(jQuery代码)

$("#container").on('click', function(event) {
    alert("container was clicked");
});

这当然有效,但我对这种方法的问题在于,由于事件通常会冒出来,如果我们实际点击#nested或触发,那个听众也会触发#someElement.我目前的解决方案,只处理点击时#container点击是比较this有event.target

$("#container").on('click', function(event) {
    if(this === event.target) {
        alert("container was clicked");
    }
});

我的问题:这被认为是"最佳做法"吗？是否有更好的方法使用jQuery来"开箱即用"地完成相同的结果？

行动示例:http://jsfiddle.net/FKX7p/

我可以用吗:

window.addEventListner();

某种程度上来说.

我的所有图片都有display = 'none'.

图像加载后,

我想设置 display = 'inline'

这样我可以规范化下载图像时显示的内容.

在这种情况下,我无法预加载我的图像.

如果我删除用于启动事件气泡的DOM元素,或者其子项启动事件气泡,我应该期待什么行为？如果元素被删除,它会继续冒泡吗？

例如 - 假设您有一个表,并希望检测表格单元格上的单击事件.JS的另一部分执行了一个AJAX请求,一旦请求完成,它将最终完全替换表.

如果我单击表格会立即在表格被成功完成AJAX请求取代后会发生什么？我问,因为我看到一些行为,其中点击事件似乎没有冒泡 - 但很难复制.

我正在观看桌子的父元素上的事件(而不是将事件附加到每个TD),并且它有时似乎没有达到它.

编辑:再次遇到这个问题,最后得到了它的根源.根本不是一个冒泡的问题!请参阅下面的答案了解详情.

我想了解如何解释冒泡.这是否意味着上升HTML代码层次结构或其他东西？

其次,我正在经历一个例子,我无法理解它所说的最后一部分

基于P的点击处理程序侦听click事件,然后阻止它传播(冒泡)

这是什么意思？

我对下面的脚本感到困惑:

var event = new Event('shazam');

document.body.addEventListener('shazam',function(){
    alert('body');
});

document.addEventListener('shazam',function(){
    alert('document');
});

window.addEventListener('shazam',function(){
    alert('window');
});

document.body.dispatchEvent(event);

当我在浏览器上运行此脚本时,我只是收到警报('body'); 事件.但是如果我将addEventListener(第三个可选参数)的capture参数设置为true,则按顺序捕获所有警报.

为什么shazam事件不会冒泡？

如何捕获围绕iframe的div上的click或mousedown事件.我已经尝试将函数附加到div上的click事件,但由于iframe从未将事件冒泡到周围的div,因此函数永远不会被调用.有没有办法可以在div上捕获事件,然后将其传播到iframe以进行默认操作

我有三个对象,ObjectA有一个ObjectB,ObjectB有一个ObjectC.当ObjectC触发事件时,我需要ObjectA来了解它,所以这就是我所做的......

public delegate void EventFiredEventHandler();

public class ObjectA
{
    ObjectB objB;

    public ObjectA()
    {
        objB = new ObjectB();
        objB.EventFired += new EventFiredEventHandler(objB_EventFired);
    }

    private void objB_EventFired()
    {
        //Handle the event.
    }
}

public class ObjectB
{
    ObjectC objC;

    public ObjectB()
    {
        objC = new ObjectC();
        objC.EventFired += new EventFiredEventHandler(objC_EventFired);
        objC.FireEvent();
    }

    public event EventFiredEventHandler EventFired;
    protected void OnEventFired()
    {
        if(EventFired != null)
        {
            EventFired();
        }
    }

    private void objC_EventFired()
    {
            //objC fired an event, bubble it up.
        OnEventFired();
    }
} …

我正在查看http://www.quirksmode.org/js/events_order.html,这部分内容不明确:

在Microsoft模型中,您必须将事件的cancelBubble属性设置为true.

window.event.cancelBubble = true

Run Code Online (Sandbox Code Playgroud)

在W3C模型中,您必须调用事件的stopPropagation()方法.

e.stopPropagation()

Run Code Online (Sandbox Code Playgroud)

这会阻止事件在冒泡阶段的所有传播.

所以我的问题是:

• 当事件侦听器设置为在捕获阶段侦听时,它是否会自动不继续传播到内部元素？
• 或者,如果它继续传播,是否会e.stopPropagation()停止传播,或者这只适用于泡沫阶段？