DOM事件流+阻止冒泡事件+dom包含
DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根结点之间的路径传播,路径所经过的结点都会收到该事件,这个传播过程可称为DOM事件流。DOM事件流最独特的性质是,文本节点也触发事件(在IE中不会),当鼠标单击“单击此文本”文本时会触发click事件,该事件的捕获阶段最先开始,从Document节点开始逐渐向下传播,直到“单击此文本”文本节点,事件进入目标阶段,在目标阶段结束之后,事件由“单击此文本”文本节点开始事件的冒泡阶段,直到Document节点为止。
简单来说事件流描述的就是页面中接受事件的顺序。
DOM事件流的三个阶段:
(1)事件捕获阶段:事件从Document节点自上而下向目标节点传播的阶段;
(2)事件目标阶段:真正的目标节点正在处理事件的阶段;
(3)事件冒泡阶段:事件从目标节点自下而上向Document节点传播的阶段。
事件冒泡是一个从子节点向祖先节点冒泡的过程;
事件捕获刚好相反,是从祖先节点到子节点的过程。
event.stopPropagation()方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行
event.preventDefault()方法取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。
例如:
form表单如果 type 属性是 “submit”,通过调用该方法,可以阻止提交表单。a元素中href连接,如果调用此方法是,连接不会被打开。
注意:
如果 Event 对象的 cancelable 属性是fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。
使用该方法还是会发生冒泡事件,冒泡会传递到上一层的父元素。
事件代理是利用事件冒泡行为,简单说就是:事件不直接绑定到某元素上,而是绑定到该元素的父元素上,如列表,再执行事件触发后的语句。 好处:(1)使代码更简洁;(2)节省内存开销
dom包含哪些?
1.元素节点
元素节点element对应网页的HTML标签元素。
2.属性 / 特性节点
元素特性节点attribute对应网页中HTML标签的属性。
3.文本节点
文本节点text代表网页中的HTML标签内容。
4.文档节点
文档节点document表示HTML文档,也称为根节点,指向document对象。