当一个事件发生时,当前 DOM 元素本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中。事件向上传递的过程便是事件冒泡。这是一个典型的责任链模型,由责任链上的节点依次对事件进行处理。当然,必要的时候我们也可以根据需要禁止事件的传播。
比如,当多个嵌套的 DOM 元素均监听同一事件时,如果我们不阻断事件的传播,事件会自下而上被依次处理:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </head> <body onclick='console.log("from body");'> <div onclick='console.log("from div");'> <button onclick='console.log("from button");'>点击我</button> </div> </body> </html>
处理事件的顺序是 button---> div ---> body 。
与事件冒泡对应的是事件捕获,事件捕获的顺序与事件冒泡的顺序相反,由外层到内层依次对事件进行捕获: