Skip to content

js事件和事件模型

专题简介

  • 事件与事件流
  • 原始事件模型
  • 标准事件模型
  • IE事件模型

事件和事件流

什么是事件

指用户的鼠标动作和键盘动作,document的load和unloaded,事件被封装成一个event对象,包含了该事件发生时的所有相关信息(event的属性)以及可以对事件进行的操作(event的方法)。

事件流是什么

用于DOM是一个树结构,如果在父子节点绑定事件的时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到事件流的概念 事件流都会经历三个阶段

  • 事件捕获阶段(capture phase)
  • 处于目标阶段(target phase)
  • 事件冒泡阶段(bubbing phase)

事件冒泡

是一种从下往上的传播方式,由最具体的元素(触发节点)然后逐渐向上传播到最不具体的那个节点,也就是DOM中最高层的父节点

事件捕获

事件捕获与事件冒泡相反,事件最开始由不太具体的节点最早接受事件,而最具体的节点(触发节点)最后接受事件

事件模型

事件模型可以分为三种:

  • 原始事件模型(DOM0级)
  • 标准事件模型(DOM2级)
  • IE事件模型(基本不用)

原始事件模型

事件类型上面有ON(onclick) 没有事件的传播(事件一旦发生就立刻调用事件句柄) 一个DOM对象只能注册一个类型的事件,如果注册了两个,则会发生覆盖,只执行后一个事件;

原始事件模型两种写法

  1. HTML代码中直接绑定
html
<input type="button"  οnclick="fun()">
  1. 通过js代码绑定
js
let btn  = document.getElementById(".btn");
btn.onclick = fun;

特性:绑定速度快

DOM0级事件具有很好的跨浏览器优势,会以最快的速度绑定,但由于绑定速度太快,可能页面还未完全加载处理,以至于事件可能无法正常运行

  • 只支持冒泡,不支持捕获
  • 同一类型的事件只能绑定一次 如上,当希望为同一个元素绑定多个类型事件的时候(上面的这个btn元素绑定两个点击事件),是不被允许的,后绑定的事件会覆盖之前的事件

删除DOM0级事件处理程序只要将对应事件属性置为null即可

js
btn.onclick = null

标准事件类型

在改事件模型中,一次事件共有三个过程:

  • 事件捕获阶段:事件从document一直向下传播到目标元素,依次检查经过的节点是否绑定了事件监听函数,如果有则执行
  • 事件处理阶段:事件到达目标元素,触发目标元素的监听函数
  • 事件冒泡阶段:事件从目标元素冒泡到document,依次检查经过的节点是否绑定了事件监听函数,如果有则执行 事件绑定监听函数的方法如下:
js
addEventListener(eventType,hander,userCapture)

事件移除监听函数的方式如下:

js
removeEventListener(eventType,hander,useCapture)

IE事件模型

IE事件模型共有两个过程:

  • 事件处理阶段:事件到达目标元素, 触发目标元素的监听函数.
  • 事件冒泡阶段:事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数,如果有则执行

事件绑定监听函数的方式如下:

js
attachEvent(eventType, handler)

事件移除监听函数的方式如下:

js
detachEvent(eventType, handler)