在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
事件冒泡是事件流的第三个阶段,通过事件冒泡可以在这个阶段对事件做出响应。
关于冒泡,事件对象中包含bubbles
、cancelBubble
、stopPropagation()
和stopImmediatePropagation()
这四个属性和方法。
1.event.stopPropagation();
事件处理过程中,阻止了事件冒泡,但不会阻击默认行为(执行超链接的跳转)
2.returnfalse;
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(不执行超链接的跳转)
还有一种与冒泡有关的:
3.event.preventDefault();
事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)
事件捕获和事件冒泡的定义
addEventListener
方法具有第三个可选参数useCapture
,其默认值为false
,事件将在冒泡阶段中发生,如果为true,则事件将在捕获阶段中发生。如果单击child
元素,它将分别在控制台上打印window
,document
,html
,grandparent
和parent
,这就是事件捕获。addEventListener
方法具有第三个可选参数useCapture
,其默认值为false
,事件将在冒泡阶段中发生,如果为true,则事件将在捕获阶段中发生。如果单击child
元素,它将分别在控制台上打印child
,parent
,grandparent
,html
,document
和window
,这就是事件冒泡。