5、JavaScript 事件处理与 HTML 模板深度解析

JavaScript 事件处理与 HTML 模板深度解析

1. 事件处理基础

在事件处理中， event.currentTarget 是一个重要的概念。想象一个列表 <ul><li></ul> ，为了简化操作，我们可以将事件处理程序附加到整个列表 <ul> 上，而非每个列表项 <li> 。当用户点击某个列表项时， target 属性指向被点击的 <li> 元素，而 currentTarget 属性则指向 <ul> 元素，不过很多时候这两个属性指向同一个元素。

需要注意的是，并非所有事件都会冒泡。例如 focus 事件，当输入元素（如文本框）获得光标时触发该事件。由于输入元素不会嵌套，所以在事件链中无法在其他地方处理该事件，此时事件要么被处理，要么被丢弃。

冒泡阶段结束后，捕获阶段开始。在捕获阶段，事件路径上的每个元素都会收到事件已被处理的通知。

2. 停止其他处理程序

如果一个元素针对单个事件有多个事件处理程序，即使其中一个处理程序停止了事件冒泡，其他处理程序仍会执行。 event.stopPropagation 方法可以阻止事件向上传播，但当前元素上的其他处理程序仍会运行。若要同时停止事件冒泡并阻止当前元素上的其他处理程序运行，可以使用 eve