DOM事件流与事件对象

  • A+
所属分类：Web前端
摘要

事件流描述的是从页面中接收事件的基础。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即是DOM事件流。
便宜好用的国外VPS推荐

DOM事件流与事件对象

1. DOM事件流

事件流描述的是从页面中接收事件的基础。事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即是DOM事件流。

举个例子，下面是给一个div注册了点击事件后，事件传播的过程。

DOM事件流与事件对象

DOM事件流分为三个阶段：

  1. 捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段

  • 事件捕获：由DOM最顶层节点开始，然后逐级向下传播到具体的元素接收的过程

  • 事件冒泡：事件开始时由具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程

由此可知，事件捕获和事件冒泡是一个顺序相反的过程。

注意：

  1. js代码中只能执行捕获或者冒泡其中一个阶段
  2. onclick和attachEvent只能得到冒泡阶段
  3. 实际开发中更关注事件冒泡
  4. 有些事件是没有冒泡的，比如onblur、onmouseleave等

2. 事件对象

2.1 事件对象的理解

eventTarget.onclick = function(event) {}    // 这个event就是事件对象

简单理解为，当事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event。比如是谁绑定了这个事件；如果是鼠标触发事件，会得到鼠标的相关信息，如鼠标光标等等。

2.2 事件对象的使用

// 1. eventTarget.onclick = function(event) {      }  // 2. eventTarget.addEventListener('click', function(event) {      })

当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（事件处理函数）。

2.3 事件对象的常见属性和方法

事件对象属性方法 说明
e.target 返回触发事件的对象（标准）
e.srcElement 返回触发事件的对象（非标准，ie6~8使用）
e.type 返回事件的类型。eg.click、mouseover（注意不带on）
e.cancelBubble 阻止冒泡（非标准，ie6~8使用）
e.returnValue 阻止默认事件，比如不让链接跳转（非标准，ie6~8使用）
e.preventDefault() 该方法阻止默认事件，比如不让链接跳转（标准）
e.stopPropagation() 该方法阻止冒泡（标准）

注：

  1. e.target与this的区别：
    • e.target返回的是触发事件的对象，this返回的是绑定事件的对象
    • e.target是点击了哪个元素，就返回哪个元素；this是哪个元素绑定了这个点击事件，就返回哪个元素

2.4 事件对象兼容性的解决

事件对象本身的获取存在兼容性问题：

  1. 标准浏览器中是浏览器给方法传递的参数，只需要定义形参e就可以获取到
  2. 在ie6~8中，浏览器不会给方法传递参数，如果需要的话，要到window.event中获取查找
// 解决 function(e) {     e = e || window.event;     var target = e.target || e.srcElement; }

3. 阻止默认行为

点击一个链接就会自动跳转、点击一个提交按钮就会自动提交，这些都是默认行为。

a.onclick = function(e) {     e.preventDefault();    // 方法（DOM标准写法）     e.returnValue;    // 属性，低版本浏览器适用，比如ie678     return false;    // 没有兼容性问题，但是return后面的代码不会执行，而且这种方法只限于传统的注册方式 }

4. 阻止事件冒泡

4.1 阻止事件冒泡的两种方式

事件冒泡：开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点。

// 1.标准写法 e.stopPropagation();  // 2.非标准写法，ie678 e.cancleBubble = true;

4.2 阻止事件冒泡兼容性的解决

if (e && e.stopPropagation) {     e.stopPropagation(); } else {     window.event.cancleBubble = true; }

5. 事件委托

原理：不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

利用事件委托，可以提高程序的性能。

<ul>     <li><button>1</button></li>     <li><button>2</button></li>     <li><button>3</button></li> </ul> <script>     // 给li的父级节点ul设置事件监听器，当点击li时，也会弹出hello world弹窗     var ul = document.querySelector('ul');     ul.addEventListener('click', function() {         alert('hello world');     }) </script>

6. 常用的鼠标事件

6.1 传统注册方式

鼠标事件 触发事件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onmouseout 鼠标离开触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发 
// 获取事件源 var eg = document.querySelector('div'); //注册事件 eg.onclick = function() {     //添加事件处理程序     alert('hello world!'); }

6.2 方法监听注册方式

方法监听方式就是在传统注册上去掉on。

document.addEventListener('click', function() {      })

  1. 禁止鼠标右键菜单contextmenu

    contextmenu主要控制应该何时显示上下文菜单，主要用于取消默认的上下文菜单。

    document.addEventListener('contextmenu', function(e) {     e.preventDefault(); })

  2. 禁止鼠标选中（selectstart 开始选中）

    document.addEventListener('selectstart', function(e) {     e.preventDefault(); })

6.3 鼠标事件对象

鼠标事件对象 说明
e.clientX 返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY 返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX 返回鼠标相对于文档页面的X坐标 ie9+支持
e.pageY 返回鼠标相对于文档页面的Y坐标 ie9+支持
e.screenX 返回鼠标相对于电脑屏幕的X坐标
e.screenY 返回鼠标相对于电脑屏幕的Y坐标
  • client：无论有没有滚动条，坐标都不变
  • page：有滚动条的时候，坐标会变化

7. 常用的键盘事件

键盘事件 触发条件
onkeyup 某个键盘按键被松开时触发
onkeydown 某个键盘按键被按下时触发
onkeypress 某个键盘按键被按下时触发（不识别功能键，例如ctrl、shift等等）

注：

  1. 如果使用方法监听注册方式时不需要加on
  2. onkeydown和onkeyup不区分大小写，onkeypress区分大小写

7.1 键盘事件对象

属性 说明
keyCode 返回该键的ASCII值

注：keyCode属性可以区分大小写（由返回的ASCII码不同可以看出），可以和onkeyup、onkeydown搭配使用。

便宜好用的国外VPS推荐