dom事件机制

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以后,可以阻止该事件的进一步冒泡行为。