事件对象事件流关于冒泡默认行为

Posted 2020-08-17

事件对象：

在触发事件的时候，会产生一个事件对象event，这个对象中包含了与事件相关的信息。 例如：在触发鼠标双击时，是触发了这几件事  onkeydown+onkeyup+onclick+onkeydown+onkeyup+onclick

事件流：

当html元素产生一个事件时，这个事件会在元素节点与根节点之后的路径传播，路径所经过的节点都会接收到这个事件，这个传播过程称为DOM事件流。 DOM事件流分为冒泡事件流和捕获事件流。

事件冒泡：

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。当我们触发了子元素的事件后，父元素对应的事件也会被触发。这个事件从原始元素开始一直冒泡到DOM树的最上层。不管有没有注册事件都会冒泡，都没有事件的话就不会触发事件。只要有一层注册事件，它都会往上冒泡，对应的事件也会一层一层的被触发。

在盒子套盒子的时候，1.当鼠标移到外盒子边框的时候会触发进出外盒子事件2.当接着进入内盒子会触发离开外盒子-进入内盒子-进入外盒子事件。

 

在轮播图的时候，为什么不给内盒子添加移入事件，而给外盒子添加？

因为内盒子与两个按钮是并列关系，当进入内盒子，它会触发显示按钮事件，接着你移到按钮上它会触发离开内盒子事件，接着冒泡，这时它向上冒泡给外盒子（真正离开内盒子了，隐藏按钮display：none，不占位置，会接着触发移入内盒子（显示按钮）-这里是个死循环），而不是内盒子，所以会出现闪动效果。

给外盒子添加移入事件的时候，这时候外盒子与按钮时父子关系。当移入外盒子边框会触发移入外盒子事件，进入内盒子的时候会触发移出外盒子-进入内盒子（冒泡给外盒子）-进入外盒子，当鼠标移入按钮会触发移出内盒子（冒泡）-移出外盒子-进入按钮（冒泡）-进入外盒子（显示按钮），这些事件很快结束，所以不会出现闪动

语法：target.addEventListener(type,listener,[useCapture]) 当useCapture为false的时候，使用事件冒泡机制,不使用捕获
冒泡顺序：div-body-html-document（IE6）
正常浏览器：div-body-html-document-window
不是所有事件都能冒泡。以下事件不冒泡：blur、focus、load、unload（关闭页面）

事件捕获：老版本浏览器只支持事件冒泡，不支持事件捕获。事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。

事件的三个阶段：
1.捕获阶段 2.目标阶段 执行当前对象的事件处理程序 3.冒泡阶段
注意：事件的三个阶段一直都在执行，只不过我们通常都会去干预冒泡阶段，而不会去干预捕获阶段。

 

//停止事件冒泡
function stopBubble(e) {
// 如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation ) {
// 因此它支持W3C的stopPropagation()方法
e.stopPropagation();
} else {
// 否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}

} //阻止事件默认行为
function stopDefault(e) {
// 阻止默认浏览器动作(W3C)
if ( e && e.preventDefault ) {
e.preventDefault();
} else {
// IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}