首页 > 其他 > 详细

DOM事件相关

时间:2020-02-12 16:11:37      阅读:69      评论:0      收藏:0      [点我收藏+]

1、DOM事件的级别:
  dom0: element.onclick = function(){}
  dom2: element.addEventListener(‘click‘,function(){},false )
  dom3: element.addEventListener(‘keyup‘,function(){},false)

2、事件模型:
  捕获 + 冒泡

3、事件流:  

  事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。

  DOM事件流分为三个阶段,分别为:

  捕获阶段:事件从Window -- Document节点自上而下向目标节点传播的阶段;

  目标阶段:真正的目标节点正在处理事件的阶段;

  冒泡阶段:事件从目标节点自上而下向Document节点传播的阶段。

  技术分享图片

  获取window对象:window
  获取document对象:window.document
  获取html对象:document.documentElement
  获取body对象:document.body

4、Evenet 对象的常见应用:
  event.preventDefault()          阻止事件的默认行为
  event.stopPropagation()       阻止事件冒泡
  event.stopImmediatePropagation()   同一个dom对象上注册俩个click事件,可阻止另一个触发
  event.currentTarget                             事件委托,获取的是发起事件的对象(父级元素)
  event.target                                         获取的是触发事件的对象(子元素)

5、自定义事件:

var touchEvent = new Event(‘touchEvent‘);
dom.addEventListener(‘touchEvent‘,function(){});
dom.dispatchEvent(touchEvent);

  CustomEvent  是另一个自定义事件方法,后面可以指定参数。

DOM事件相关

原文:https://www.cnblogs.com/tg666/p/12299269.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!