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连接,如果调用此方法是,连接不会被打开。
使用该方法还是会发生冒泡事件,冒泡会传递到上一层的父元素。

事件代理是利用事件冒泡行为,简单说就是:事件不直接绑定到某元素上,而是绑定到该元素的父元素上,如列表,再执行事件触发后的语句。 好处:(1)使代码更简洁;(2)节省内存开销

dom包含哪些?
1.元素节点
元素节点element对应网页的HTML标签元素。
2.属性 / 特性节点
元素特性节点attribute对应网页中HTML标签的属性。
3.文本节点
文本节点text代表网页中的HTML标签内容。
4.文档节点
文档节点document表示HTML文档,也称为根节点,指向document对象。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值