事件默认行为
事件默认行为指事件触发后它本身会执行的行为,不包含我们自定义的行为。
例如创建一个form表单,会有一个button绑定submit提交表单数据的事件,当我们点击button会触发submit事件,接着数据以查询字符串的形式拼接到网页的路径中并跳转到指定页面。这就是submit事件的默认行为。
实际情况中,不需要时刻触发事件的默认行为。这时可以使用e.preventDefault()阻止事件默认行为,e为事件传递的事件对象。
事件冒泡
给一个元素绑定事件,触发该事件后,元素本身会执行事件行为,元素的父元素也会执行相同的事件行为,依次类推,父元素的父元素...只要是绑定了事件的父元素都会触发对应的事件行为。这个事件触发机制叫事件冒泡。
通常情况下,当不需要这种事件冒泡机制时,我们可以使用e.stopPropagation()来阻止事件冒泡
事件捕获
上面所说的事件冒泡,指的是子元素触发某个事件,其绑定了事件的父元素也会同时触发对应的事件行为;
事件捕获的过程可以说刚好相反,例如当我们点击一个元素时,浏览器会从最外层html祖先元素一直到点击的这个元素层层查找,看有没有绑定点击事件的元素,如果有则触该元素的点击事件行为。
事件冒泡和事件捕获不再是分离的两个单独的过程,而是成为了事件响应的两个阶段:当一个元素上发生某一事件时,浏览器先进行捕获阶段,从最外层父元素一直到目标元素层层查找,找到注册了该事件的元素,但不执行对应的事件行为;然后进行冒泡阶段,从目标元素开始执行,只要是注册了该事件的元素按顺序执行对应的事件行为。
事件委托
有了捕获和冒泡机制,我们在实际开发中,可以实现事件委托。
当一个父元素中包含很多个子元素,同时,我们要对所有子元素绑定同样的事件,这时我们不需要给通过循环给每一个子元素绑定事件,而是可以给父元素绑定事件,子元素满足触发事件条件后,就可以执行对应父元素绑定事件的事件行为,这个方法叫做事件委托。