Javascript 为什么事件冒泡不起作用？

我认为我理解事件冒泡，但我的代码没有按预期工作：

<div id="write">
    <form method="post" tabindex="1" onsubmit="myfunc()">
        <textarea></textarea>
        <input />Another form element
        <input />Another form element
        <input type="submit">
    </form>
</div>

<p>Some other text and images...</p>
<div id="overlay"></div>
<script>
    //var formele = document.querySelectorAll("#write form, #write form *");
    var formele = document.querySelectorAll("#write form");
    for (var i = 0; i < formele.length; i++) {
        formele[i].addEventListener("focus", function () {
            overlay.classList.add("active");
        });
        formele[i].addEventListener("focusout", function () {
            overlay.classList.remove("active");
        });
    }
</script>

另一种形式元素
另一种形式元素
其他一些文本和图像

//var formele=document.queryselectoral（#write form，#write form*）；
var formele=document.queryselectoral（“#write form”）；
对于（变量i=0；i

当窗体或其中的元素获得焦点或被单击时，此代码应使页面的其余部分变暗。我对事件冒泡的理解如下： 当窗体的子级获得焦点时，它没有添加事件侦听器。因此，焦点事件冒泡到表单元素并触发它的事件侦听器。 但是，它不是这样工作的：如果我将事件侦听器添加到表单中，那么当单击文本区域或其中的输入时，什么也不会发生。我还必须将事件侦听器添加到子元素中，以使其正常工作。

---

有人能解释一下吗？显然，我对事件冒泡的理解是错误的。

并非所有事件都是冒泡的。您可能需要聚焦。覆盖未定义？@Kebin B这就是原因，谢谢您的提示。因此，我的理解是正确的。@Jonas w overlay在这里定义为：您使用了哪个浏览器？