通常,事件处理程序在冒泡阶段运行。请注意,如果您在此示例中在<input>
中输入某些内容会发生什么 - 内部处理程序会首先运行,因为事件从目标“冒泡”到文档,然后是外部处理程序。
有时,您希望处理程序在捕获阶段运行。在事件名称的末尾添加capture
应用
<div onkeydowncapture={(e) => alert(`<div> ${e.key}`)} role="presentation">
<input onkeydowncapture={(e) => alert(`<input> ${e.key}`)} />
</div>
现在,相对顺序反过来了。如果给定事件同时存在捕获和非捕获处理程序,则捕获处理程序将首先运行。
1
2
3
4
<div onkeydown={(e) => alert(`<div> ${e.key}`)} role="presentation">
<input onkeydown={(e) => alert(`<input> ${e.key}`)} />
</div>