DOM 需知晓的几个点:
1.DOM 事件的基本概念: DOM 事件的级别
2.DOM 事件模型: 指的就是捕获和冒泡
4.DOM 事件捕获的具体流程
5.Event 对象的常见应用
1. 事件级别:
DOM 标准定义的级别:
DOM0:
DOM0 跟事件相关的一个标准就是:
JS 写法: element.onclick = function(){} ,
html 写法: <button οnclick="add()"></button>
- DOM2:
- element.addEventListener('click',function(){
- },false);
其中的 true, 表示这个事件是在捕获的时候触发.
false 就是在冒泡的时候触发.
- DOM3:
- element.addEventListener('keyup',function(){
- },false)
这种事件的定义方式, 事件类型增加了许多, 比如说 鼠标事件, 键盘事件等等.
2. 事件模型: 捕获和冒泡
捕获是从上往下, 冒泡是从当前事件往上.
3. 事件流: 就是浏览器在为这个当前页面与用户做交互的过程中. 用户点击了鼠标左键, 这个左键是怎么传递的, 它又怎么响应的.
第一阶段: 捕获. 事件通过捕获到达目标元素 (目标元素既目标阶段).
第二阶段: 目标阶段. 比如说用户当前点击了这个按钮, 这个按钮就是目标阶段
第三阶段: 冒泡 . 目标阶段通过冒泡上传到 Windows 对象
4.DOM 事件捕获的具体流程:
捕获是从上到下的这么一个过程. 第一个接收到事件的对象是 Windows , 接着就是 document
Windows--> document --> HTML 标签 -->body--> ...--> 一直到目标元素
document.documentElement 它是专门一个表示节点对象的.
5.Event 对象的常见应用:
Event 对象是事件响应中一个很重要的对象. 因为我们经常会去获取用户交互的一个参数.
以下 5 个是常见却很容易出错的.
1), event.preventDefault(); : 阻止默认事件.
比如说, 一个 a 标签, a 标签绑定了一个事件. 那么在响应函数中, 如果设置了 event.preventDefault() . 就阻止了 a 标签的一个默认的跳转行为.
2),event.stopPropagation() : 阻止冒泡的一个行为.
比如说, 我父元素绑定一个事件, 我子元素也绑定一个事件. 这时我想子元素执行子元素的事件, 父元素执行父元素的事件.
如果你阻止冒泡, 当单机子元素的时候, 按照冒泡的原理, 父元素也会被响应. 这个时候就应该添加一个阻止冒泡.
3),event.stopImmediatePropagation() :
比如说, 一个按钮绑定了两个 click 事件. click1 和 click2. 当我想通过优先的方式, 当我想执行 click1 的时候不要执行 click2 了
那么怎么办呢?? 这时候在 click1 事件中加入这么一句, 它就能成功的阻止 click2 事件的执行.
4),event.currentTarget : 值得就是 当前所绑定的事件对象 (下面例子中的父元素)
5), event.target : 当前被点击的元素 (下面例子中的子元素)
eg: 事件委托.
比如说 给你一个 for 循环, 给一个 dom 注册了事件, 要怎么优化.
一个父元素有 10 个子元素, 你又不想给 10 个子元素都绑定一个 click 元素. 那么只要在父级元素上绑定一个事件就可以了.
这个时候就可以使用事件委托. 将子元素的事件转移到父元素身上. 然后在绑定事件. 然后再响应的时候, 区分是哪个元素被点击. 那么是怎么区分是哪个子元素被点击的呢?
这个时候就是 target 上场的时候.
DOM 事件
来源: http://www.bubuko.com/infodetail-3348612.html