dom事件机制

更多详细介绍看文章: https://www.cnblogs.com/lazychen/p/5664788.html

在每个dom事件中有event对象，有对应的方法，例如stopPropagation，preventDefault，stopImmediatePropagation，有对应的属性，例如cancelBuddle，target，srcElement等等

总结下event事件在各种分发和冒泡过程的处理

event.preventDefault()

该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。

例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。

a标签的onclick是跳转到新页面，可以调用此方法阻止跳转

<a href="www.baidu.com" onclick="say(event)">click</a>
<script>
function say(event) {
    event.preventDefault();
    alert('click');
}
</script>

注意，如果 Event 对象的 cancelable 属性是 fasle，那么就没有默认动作，或者不能阻止默认动作。无论哪种情况，调用该方法都没有作用。

在开发移动端页面的时候遇到了一个问题，比如下面

在移动端会先触发touchend事件，然后再传递到底层的click事件，这时候需要在touchstart事件阻止下一层触发click事件

event.stopPropagation()

终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其

它事件句柄被调用，但是它可以阻止把事件分派到其他节点。

event.stopImmediatePropagation()

如果某个元素有多个相同类型事件的事件监听函数，则当该类型的事件触发时，多个事件监听函数将按照顺序依次执行.如果某个监听函数执行了 event.stopImmediatePropagation()方法，则除了该事件的冒泡行为被阻止之外(event.stopPropagation方法的作用)，该元素绑定的后序相同类型事件的监听函数的

执行也将被阻止。

两个的区别就是在同一元素绑定多个同类型事件，是否触发后续的事件

event.cancelBuddle

如果一个事件是可冒泡的，则它的cancelBubble属性的默认值为 false，代表允许该事件向上冒泡。 将cancelBubble属性设置为true以后,可以阻止该事件的进一步冒泡行为。