js 事件冒泡与事件捕获

发布网友发布时间：2024-09-28 01:37

共1个回答

热心网友时间：2024-10-24 18:47

了解JavaScript中的事件处理机制，首先要区分事件冒泡和事件捕获两种模式。

事件捕获(event capturing)从document开始，沿着DOM树的结构向下直到目标节点，即自上而下的触发事件，非默认模式。而事件冒泡则是从目标节点开始，向上逐级传递到document，即自下而上的触发，这是默认行为。

通过addEventListener方法为DOM元素添加事件监听，它有三个参数：事件类型、处理函数和是否使用捕获模式。捕获与冒泡的区别在示例中明显体现：点击son元素时，事件冒泡模式下先触发son，再是father；而捕获模式则相反，先father后son。

在事件执行顺序上，W3C规定了捕获和冒泡的顺序：先捕获，再到目标元素的默认行为，最后冒泡。例如，点击div4，顺序为捕获div2和div4，然后冒泡div3和div1。同时，通过stopPropagation()和preventDefault()可以控制事件的传播和默认行为。

addEventListener和on的使用有所不同：on事件会覆盖后续同类型的on事件，而addEventListener则不会。例如，onmouseover事件会覆盖后续的onmouseover，而addEventListener不会。