事件对象会在事件被触发时获得，对象包含了当前事件的一些信息，如点击事件可以获取到点击的位置，键盘输入事件可以获取到按下的键。

1.获取事件对象

在给 DOM 节点绑定事件时，需要传递一个事件处理器，其本质上是个函数，在事件触发时被调用。

在事件处理器被调用时，默认就会传递一个参数，这个参数就是事件对象。

2.常用的事件对象下的属性和方法

2.1 属性

2.1.1 target

target表示当前事件最终捕获到的目标。

<div class="a">
  我是第一个节点 a
  <div class="b">
    我是第二个节点 b
    <div class="c">
      我是第三个节点 c
      <div class="d">
        我是第四个节点 d
        <div class="e">
          我是第五个节点 e
          <div class="f">
            我是最里面的一个元素 f
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="result" style="margin-top: 16px;"></div>

<script> var resultEle = document.querySelector('.result'); document.querySelector('.a').addEventListener('click', function(e) {
       resultEle.innerText = '捕获到的元素类名是' + e.target.className; }); </script>

可以看到事件绑定在类名为 c 的节点上，点击其子节点的时候，子节点就是最终捕获到的元素。

同理，点击其他的节点也会捕获到对应的元素类名

2.1.2 currentTarget

通过 currentTarget 可以获取到目前触发事件的元素。

<div class="a">
  我是第一个节点 a
  <div class="b">
    我是第二个节点 b
    <div class="c">
      我是第三个节点 c
      <div class="d">
        我是第四个节点 d
        <div class="e">
          我是第五个节点 e
          <div class="f">
            我是最里面的一个元素 f
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="result" style="margin-top: 16px;"></div>

<script> var resultEle = document.querySelector('.result'); document.querySelector('.a').addEventListener('click', function(e) {
       resultEle.innerText = [ '当前触发事件的元素的类名是：', e.currentTarget.className, '。当前捕获到的元素类名是：', e.target.className, ].join(''); }); </script>

不论点击的是哪个子节点，currentTarget 都是表示当前触发事件的节点。

2.2 方法

2.2.1 stopPropagation

调用此方法就会阻止事件的冒泡，使用到的场景大多为某个父元素和元素本身绑定了相同事件时。

2.2.2 preventDefault

此方法可以取消事件的默认行为，比如超链接的点击，会发生跳转，跳转动作就是默认行为。

给超链接绑定点击事件，调用事件对象下的 preventDefault 属性，默认行为就会取消，即不会发生跳转。

<a href="http://www.baidu.com/">百度</a>

<script> var aTag = document.querySelector('a'); aTag.onclick = function(e) {
       e.preventDefault(); alert('跳转被终止！'); }; </script>

3.小结

事件对象包含了事件相关的信息，有事件对象，才能对各个事件做更深层次的交互优化。