Javascript事件，捕获冒泡的作品'；T_Javascript_Events

Javascript事件，捕获冒泡的作品'；T

javascript events

Javascript事件，捕获冒泡的作品'；T,javascript,events,Javascript,Events,我对JS事件传播的理解是，事件首先“捕获”DOM树，然后“气泡”备份，一路上触发处理程序 <html> <body> <div id="textbox"> nothing yet </div> </body> <script> // Gets incremented by "update" event var val = 0; // Event starts her

我对JS事件传播的理解是，事件首先“捕获”DOM树，然后“气泡”备份，一路上触发处理程序

<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>


还没有
//由“更新”事件递增
var=0；
//活动从这里开始
textbox=document.getElementById（“textbox”）；
textbox.addEventListener（“更新”，函数（e）{
textbox.innerHTML=val；
}，假）；
//这里应该有泡沫吗
body=document.getElementsByTagName（“body”）[0]；
正文.addEventListener（“更新”，函数（e）{
val++；
}，假）；
函数更新（）{
var e=新事件（“更新”）；
textbox.dispatchEvent（e）；
}
设置间隔（更新，10）；

在我的电脑里，有一个div“textbox”在体内。我认为发送到文本框的更新事件应该出现在正文中，但事实并非如此。计数器从不更新

如果我将主体的事件侦听器的UseCapture参数设置为true，计数器将更新

为什么捕获可以工作，但不能冒泡？

如果使用旧的（不幸被弃用）方法，它会冒泡。看

您需要将

{bubbles:true}

作为

新事件（…）

的第二个参数传递给冒泡事件，如，因为

您的活动，这意味着

当一个对象是在a（例如an）中，它可以到达在那个物体上也是

首先，所有对象都是谁的 capture变量设置为true，则在中调用

其次，调用对象自身的

最后，且仅当的属性值为则再次调用对象的，但现在情况正好相反

因此，如果

冒泡

属性不为true，则事件不会冒泡

使用

事件创建事件时，可以将气泡
属性设置为true：
event=new（类型[，eventInitDict]）
返回属性值设置为的新事件
类型。可选的eventInitDict参数允许通过对象成员设置和属性
同名的
要获得想要的效果（先不显示任何内容，然后显示0,1,2，…），您需要遵循前面的几个答案，再加上在文本框上设置捕获。（否则，您将看到尚未显示任何内容，1，2，…）。首先，您需要在事件中将冒泡设置为true，如下所示：
function update() {
    var e = new Event("update",{bubbles:true});
    textbox.dispatchEvent(e);
}

// 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);

然后需要捕获事件（设置为true）-如下所示：
function update() {
    var e = new Event("update",{bubbles:true});
    textbox.dispatchEvent(e);
}

// 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);

所以一切都是这样的：
function update() {
    var e = new Event("update",{bubbles:true});
    textbox.dispatchEvent(e);
}

// 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);

尝试console.log（e.bubbles）
设置capture=true
对于textbox
无效，因为它位于DOM树的“底部”