JavaScript中的事件模型
一、事件与事件流
事件流都会经历三个阶段:
- 事件捕获阶段(capture phase)
- 处于目标阶段(target phase)
- 事件冒泡阶段(bubbling phase)
二、事件模型
事件模型可以分为三种:
- 原始事件模型(DOM0级)
- 标准事件模型(DOM2级)
- IE事件模型(基本不用)
DOM0
没有统一标准,是浏览器厂商自己开发实现的,大概实在98年左右,出现第一个规范 DOM1级
绑定DOM0
事件
- HTML代码中直接绑定
<input type="button" onclick="fun()">
- JS
var btn = document.getElementById('.btn');
btn.onclick = fun;
特性
-
绑定速度快
-
只支持冒泡,不支持捕获
-
同一个类型的事件只能绑定一次
删除DOM0
事件
btn.onclick = null;
DOM2
事件绑定
addEventListener(eventType, handler, useCapture);
// 单击事件
obtn.addEventListener("click",function(){
console.log(123);
},false)
事件移除
removeEventListener(eventType, handler, useCapture)
参数如下:
eventType
指定事件类型(不要加on)handler
是事件处理函数useCapture
是一个boolean
用于指定是否在捕获阶段进行处理,一般设置为false
使用冒泡的方式
event事件对象
e.preventDefault():阻止标签的默认行为
e.stopPropagation():阻止事件流的传播