事件高级与DOM事件流

高级事件

目标:
事件高级与DOM事件流
事件高级与DOM事件流

我们平时用的绑定事件
事件高级与DOM事件流
如果我们用平时的传统方法注册事件,后面绑定的处理函数会覆盖之前的处理函数。

事件监听方式(传入的type必须是字符串!!!)
事件高级与DOM事件流
当我们用传统的做法:
事件高级与DOM事件流
只弹出hao a u;证明了平时的传统方法注册事件,后面绑定的处理函数会覆盖之前的处理函数。

但是如果我们使用事件监听方式:注意type是字符串形式,并且不能加on
事件高级与DOM事件流

此时先弹出22,后弹出33

如何解除绑定呢?
传统事件解绑:element.onclick = null;



监听方式事件:
removeEventListener(‘click’,fun):注意函数此时不能衔接,要写到后面去。注意fun函数不需要()
事件高级与DOM事件流

DOM事件流

事件流:描述从页面接收事件的顺序。
DOM事件流的3个阶段:

  1. 捕获阶段
  2. 当前阶段
  3. 冒泡阶段
    事件高级与DOM事件流
    捕获阶段,从上至下:document->html->body->father->div
    冒泡阶段:从下至上:div->father->body->html->document
    事件高级与DOM事件流
    为什么学习DOM事件流呢:举例:
    事件高级与DOM事件流
    此时一次弹出son->father->document。
    此时便印证了DOM事件流时的冒泡阶段。

有些事件时没有冒泡的,比如onblur,onfocus,onmouseenter,onmouseleave