问题
- DOM 事件的级别
- DOM 事件模型(就是捕获和冒泡儿)
- DOM 事件流
- 描述DOM事件捕获的具体流程
- Event 对象的常见应用
- 自定义事件
DOM 最重要的内容:
- 一个是事件原理的掌握,比如捕获和冒泡儿的一个具体流程是怎么样的
- 第二个是怎么去注册一个事件,也就是监听用户的行为
- 三个是做响应的时候Event对象是一个非常重要的东西,Event对象常见的应用有哪些呢?
- DOM 事件的级别

-
DOM 事件模型(就是捕获和冒泡)
-
捕获:从上往下
-
冒泡:从下往上,从当前元素(目标元素)往上
-
-
事件流
解释:浏览器在为当前页面与用户做交互的过程中,比如我点击了鼠标的左键,这个左键是怎么传到你的这个页面上,这就是事件流.
它要怎么响应呢,要分三个阶段

第一阶段是捕获
第二是目标阶段(比如我点击了当前这个按钮),事件通多捕获到达目标元素,这就是目标阶段
第三个阶段就是从目标元素再上传到window对象,也就是冒泡儿过程
-
描述DOM事件捕获的具体流程
- 先想一个问题,我点击页面上一个元素,第一个接受到事件的对象是哪个元素呢?答案是
window
过程如下
window-document-html-body
- 先想一个问题,我点击页面上一个元素,第一个接受到事件的对象是哪个元素呢?答案是

- 在BOM 中最常用的两个对象一个是window,另一个是document,在事件捕获中是他们两个最先得到;问题又来了,在js中,获取body标签可以用document.body,那么怎样获取html标签呢,能用document.html吗?显然是不能的,获取html标签要用
document.documentElemen
; - 冒泡过程与之相反,从最深的节点到达window对象
-
Event 对象的常见应用
Event对象是事件响应非常重要的一个对象,因为你要拿很多用户交互的参数,比如我想拿用户到底击中了哪个键或者按下了键盘的那个按键,等等

-
event.preventDefaut()
,阻止事件的默认行为 -
event.stopPropagation()
,阻止事件冒泡,应用举例,比如我父节点上绑定了一个事件,子节点上绑定了另外一个事件,我不想子节点冒泡到父节点上 -
event.stopImmediatePropagation()
, 停止立即传播,举例,比如我绑定了两个click事件1和2,我想通过优先级的方式,第一个响应的函数是a,第二个响应的函数是b,我想让a点击之后就不要执行b了,在a中添加这么一个函数就行了 -
event.currentTarget()
,event.target()
,这两个对象经常出现在事件委托当中,比如一个for循环中给一个dom注册了n多个事件,问你怎么优化,其实问的就是事件代理,把子元素上的事件代理都绑定到父元素上,一次事件就可以了 -
event.target()
,就是当前被点击的那个元素(IE中用srcElement) -
event.currentTarget()
,当前绑定事件的对象,比如父级元素绑定了click事件,event.currentTarget()就是那个指定的父级元素
- 自定义事件(模拟事件)

- 用法的场景:比如我有一个按钮,这个按钮不是一个常规的click事件,先给他自己增加一个事件,我想在别的地方触发这个 事件,而不是用回调的方式去处理,这个时候可以用自定义事件了
var eve = new Event('custome') // 用 new Event 声明一个自定义事件,事件名称为custome,可以把eve当做click一样
dom.addEventListener('custome',function(){ //绑定事件名称
console.log('Hello World!')
});
dom.dispatchEvent(eve); //通过dispatch这个API触发这个事件
网友评论