Question

我对JS事件传播的理解是事件首先捕获＆＃34;沿着DOM树，然后＆＃34;气泡＆＃34;备份，一路上触发处理程序。

<html>
<body>
    <div id="textbox">
        nothing yet
    </div>
</body>

<script>
    // Gets incremented by "update" event
    var val = 0;

    // Event starts here
    textbox = document.getElementById("textbox");
    textbox.addEventListener("update", function(e) {
        textbox.innerHTML = val;
    }, false);

    // Should bubble here
    body = document.getElementsByTagName("body")[0];
    body.addEventListener("update", function(e) {
        val++;
    }, false); 

    function update() {
        var e = new Event("update");

        textbox.dispatchEvent(e);
    }

    setInterval(update, 10);
</script>
</html>

在我的code here中，有一个div＆＃34;文本框＆＃34;在体内。我认为发送到文本框的更新事件应该冒泡到正文，但它没有。计数器永远不会更新。

如果我将body＆lt; s事件监听器的UseCapture参数设置为true，则计数器会更新。

为什么要捕捉工作，而不是冒泡？

Answer 1

dispatchEvent dispatches您的活动。 Summarizing，这意味着

event dispatched对象的participates   tree中的element（例如event listeners），它可以到达   ancestors对象ancestor也是event listeners。

首先是所有对象的tree order event listeners   在event。
中调用捕获变量设置为true
其次，调用对象自己的bubbles。

最后，仅当ancestor的event listeners属性值为   是的，再次调用对象的tree order Event，   但现在反向type。

因此，如果bubbles属性不为真，则事件不会冒泡。

使用bubbles创建活动时，您可以将Event属性设置为true：

event = new bubbles(type [, eventInitDict])
返回cancelable属性值设置为的新事件型。可选的 eventInitDict 参数允许通过对象成员设置{{3}}和{{3}}属性同名。

Answer 2

要获得您想要的效果（暂无显示，然后显示0,1,2，...），您需要遵循以前的几个答案，并在文本框上设置捕获。（否则你会看到什么都没显示，1,2，......）。首先，您需要在事件中将冒泡设置为true - 如下所示：

function update() {
    var e = new Event("update",{bubbles:true});
    textbox.dispatchEvent(e);
}

然后你需要捕获事件（设置为true） - 就像这样：

// Event starts here
textbox = document.getElementById("textbox");
textbox.addEventListener("update", function(e) {
    textbox.innerHTML = val;
}, true);

所以一切都是这样的：

// Event starts here
textbox = document.getElementById("textbox");
textbox.addEventListener("update", function(e) {
    textbox.innerHTML = val;
}, true);

// Should bubble here
body = document.getElementsByTagName("body")[0];
body.addEventListener("update", function(e) {
    val++;
    console.log(val)
}, false);


function update() {
    var e = new Event("update",{bubbles:true});
    textbox.dispatchEvent(e);
}

setInterval(update, 1000);

Answer 3

根据the documentation on MDN，您需要将{ bubbles: true }作为第二个参数传递给new Event( ... )，以使事件按照bubbles defaults to false起泡，因为Updated jsfiddle example。

Answer 4

如果您使用旧的（不幸的是已弃用）方式，它会冒泡。见https://jsfiddle.net/py9vyr7h/1/

function update() {
    var event = document.createEvent('CustomEvent');
    // Second param says to bubble the event
    event.initEvent('update', true, true);
    textbox.dispatchEvent(event);
}

Javascript事件，捕获工作Bubbling没有

4 个答案: