在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中保存着所有与事件有关的信息。包含导致事件的元素、事件的类型以及其他与特定事件相关的信息。如鼠标操作导致的事件对象中，会包含鼠标的位置信息，键盘操作导致的事件对象中，会包含与按下键有关的信息。

1. DOM 中的事件对象

兼容 DOM 的浏览器中会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时，使用什么方法，都会传入 event 对象。

只有 IE 没有实现 DOM 的事件对象，其余浏览器都是实现了。

往事件处理程序中传入的参数

  1. oDiv.onclick = function(e) {
  2.   console.log(e); //=> e 就是事件对象
  3. }

1.1 currentTarget

事件处理程序当前正在处理事件的那个元素，也就是事件处理程序中的 this 始终指向这个 currentTarget 的值。

如果事件处理程序绑定的元素，与具体的触发元素是一样的，那么 this、currentTarget、target 三个值是相同的。

1.2 target

指触发事件的具体目标，也就是最具体的那个元素，事件源。是个只读属性

就算绑定事件处理程序的是大容器，但是只要是由于内部某个具体元素冒泡到大容器上触发的，那么 target 就是那个具体元素。

1.3 type

被触发事件的类型。是一个字符串，只读属性。

1.4 preventDefault 阻止默认行为

这个方法用于阻止特定事件的默认行为，如 a 标签的跳转等。

只有 cancelable 属性设置为 true 是事件，才可以使用这个方法来取消其默认行为。

  1. e.preventDefault();

1.5 stopPropagation 阻止冒泡

这个方法用于立刻停止事件在 DOM 层次上的传播，即取消进一步的事件捕获或冒泡。

  1. e.stopPropagation();

1.6 eventPhase

这个属性用于确定事件当前正位于事件流的那个阶段。

只读属性，值为数字：

  • 1：捕获阶段

  • 2：处于目标对象阶段

  • 3：冒泡阶段

如果某个事件对象中的 eventPhase 属性值为 2，说明事件处理程序中的 this、currentTarget、target 始终都是相等的。

1.7 path

捕获过程中的所有元素对象，也就是传播路径。

1.8 鼠标事件对象

clientX、clientY

相对于浏览器可视区左上角（0,0）

screenX、screenY

相对于设备屏幕左上角（0,0）

offsetX、offsetY

相对于事件源左上角（0,0）

pageX、pageY

相对于整个网页左上角（0,0），包含被卷上去的区域

x、y

不设置 position，x、y = clientX、clientY
设置 position，x、y = offsetX、offsetY

1.9 键盘事件对象

keyCode

这个属性是键盘事件独有的，存储的是当前按键的键盘码。是一个只读属性。

JS 事件对象 - 图1

IE 使用 keyCode 获取，Firefox、Opera等使用 which 获取，而 Chrome 两个属性都有

which

也是键盘码，但是不兼容 IE

  1. let code = e.which || e.keyCode;

2. IE 中的事件对象

IE 不兼容 DOM 的事件对象，要访问 IE 的事件对象那个有几种方式，取决于事件处理程序的方法。

在 DOM 0级方法添加的事件处理程序中，event 对象作为 window 的一个属性存在。

  1. e = e || window.event;

如果是使用 attachEvent 添加的，那么就会有一个 event 对象作为参数被传入事件处理程序中。与 DOM 的一样。但是同样也可以通过 window 来访问 event 对象。

2.1 srcElement

IE 中的目标元素，事件源，对应 DOM 中的 e.target

2.2 returnValue

IE 中阻止默认行为的一个属性。只要其值设置为 false，就可以阻止默认行为。

2.3 cancelBubble

IE 中用于阻止冒泡的属性，设置为 true 则停止冒泡。与 DOM 中的 stopPropagation 作用相同，由于 IE 不支持事件捕获，因此只能取消事件冒泡，而 DOM 中的方法，可以同时取消事件的捕获和冒泡。

3. 跨浏览器兼容

主要用于兼容 IE

获取事件对象

  1. e = e || window.event;

获取目标元素

  1. var tar = e.target || e.srcElemnt;

阻止默认行为

  1. e.preventDefault ? e.preventDefault() : e.returnValue = false;

阻止事件冒泡

  1. e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;