Question

我认为我理解事件冒泡但我的代码无法正常工作：

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

当表单或内部元素获得焦点或单击时，此代码应使页面的其余部分变暗。我通过以下方式了解事件冒泡：当表单的子项获得焦点时，它没有添加事件侦听器。因此焦点事件冒泡到表单元素并触发它的事件监听器。但是它没有那样工作：如果我将事件监听器添加到表单中，则只有在单击textarea或输入内部时才会发生任何事情。我必须向子元素添加事件监听器才能使其工作。谁能解释一下？显然，我对事件冒泡的理解是错误的。

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

0 个答案: