Javascript 了解事件委托处理

我试图在同一页上使用不同形式的事件委托。然而，我在尝试提交表单时遇到了一个有趣的问题

我试着“点击”一个表单（用于提交按钮），因为我很清楚事件委托必然会在整个表单上设置“点击”

然而，问题来自这样一个事实，即“click”事件实际上是在整个页面上设置的，而不仅仅是表单或按钮元素。因此，无论我在页面上单击何处，都会触发表单的“单击”事件。所有浏览器都是如此

“变革”事件也在发生同样的事情。在窗体上设置“change”事件时，窗体的子字段和特定窗体节点之外的其他字段都会触发该事件

所以，虽然我知道以前有人问过关于活动授权的问题，但他们并没有真正回答这个问题。这是个问题吗？也许这就是事件委派的工作方式？但如果是这样，那么为整个文档触发事件不是浪费内存吗？解决办法是什么

另外，是否有一种跨浏览器的方式来停止纯Javascript中的传播？我发现最好的是：

我知道我可以在触发时按类型过滤事件，但这是唯一可以做的事情吗？请帮我理解这一点

编辑：

具体的问题是，将事件委托给表单处理其特定字段上的事件是否也会触发文档其余部分上的事件？如果是，如何处理？

---

如果这不是事件委派的预期行为，那么是什么导致了它呢？

一个事件将在其祖先中冒泡。如果你有HTML结构

<div>
    <h2>
        <span>
            <input />
        </span>
        <strong>
            Blah
        </strong>

废话

。。。单击输入元素，您会看到click事件起源于

输入

元素，然后冒泡出它的祖先（

span

，

h2

，

div

，

主体

，

文档

）。它不会在

strong

上启动，因为它不是祖先。有关示例，请参见（单击其中一个

框时查看控制台）

您的

不应嵌套。如果您在每个

元素上附加事件处理程序，并在其他表单上看到其他表单触发事件上的事件，我将验证您的HTML（），以确保您没有遗漏某个结束标记或其他内容

---

要查看事件起源于哪个元素，可以使用

e.target

和

e.srceelement

（即<8）。

您没有显示注册事件侦听器的实际代码

必须使用preventDefault和StopRopagation

我希望这是不言自明的。如果你愿意，请用叉子拨弄

请注意form2.input如何没有事件侦听器，并且事件会冒泡到outerDiv

form1是根据相关的用户控件执行停止和预防的一个

输出区域应该澄清发生了什么

HTML

<div id="outerDiv">
<div>
    <input id="pd" value="1" type="checkbox">Prevent Default in form1 keydown</input>
</div>
<div>
    <input id="sp" value="1" type="checkbox">Stop Propagation in form1 keydown</input>
</div>
<div>
    <button id="clear">Clear Output</button>
</div>
<form id="form1" action="">
    <div>
        <label>input of form1
            <input type="text" />
        </label>
    </div>
</form>
<form id="form2" action="">
    <div>
        <label>input of form2
            <input type="text" />
        </label>
    </div>
</form> <pre id="output">
    watch this spot
</pre>
</div>

---

博士，你应该更精确和简洁——你的问题是什么？只是添加了一个具体的问题。现在我不明白你的问题，但也许其他人会：）

<div id="outerDiv">
<div>
    <input id="pd" value="1" type="checkbox">Prevent Default in form1 keydown</input>
</div>
<div>
    <input id="sp" value="1" type="checkbox">Stop Propagation in form1 keydown</input>
</div>
<div>
    <button id="clear">Clear Output</button>
</div>
<form id="form1" action="">
    <div>
        <label>input of form1
            <input type="text" />
        </label>
    </div>
</form>
<form id="form2" action="">
    <div>
        <label>input of form2
            <input type="text" />
        </label>
    </div>
</form> <pre id="output">
    watch this spot
</pre>
</div>

window.addEventListener('DOMContentLoaded', function (event) {
// console.log("DOMContentLoaded event handler ...");
var form1 = document.getElementById('form1');
var form2 = document.getElementById('form2');
var output = document.getElementById('output');
var div = document.getElementById('outerDiv');
var clear = document.getElementById('clear');
clear.addEventListener('click', function (event) {
    output.textContent = ('\n' + clear.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' clears output');
}, false);
console.dir(output);
div.addEventListener('keydown', function (event) {
    output.textContent += ('\n' + div.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices  \'' + event.srcElement.value + '\'');
}, false);
form1.addEventListener('keydown', function (event) {
    output.textContent += ('\n' + form1.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices  \'' + event.srcElement.value + '\'');
    // prevents default of generating an input event
    if (document.getElementById('pd').checked) {
        event.preventDefault();
        output.textContent += ('\n\t' + form1.localName + '\'s ' + event.type + ' event handler does preventDefault');
    }
    // stops propagation up to div
    if (document.getElementById('sp').checked) {
        event.stopPropagation();
        output.textContent += ('\n\t\t' + form1.localName + '\'s ' + event.type + ' event handler does stopPropagation');
    }
}, false);
form1.addEventListener('input', function (event) {
    output.textContent += ('\n' + form1.id + '\'s ' + event.type + ' event handler for ' + event.srcElement.localName + ' notices  \'' + event.srcElement.value + '\'');
}, false);
}, false);