JavaScriptDOM(五)

一、什么是事件对象

当一个事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是event。只有有了事件event才会存在，它是系统自动创建的，不需要传递参数。

二、事件对象的使用

在标准浏览器中会将一个event对象直接传入到事件处理程序中，而早期版本的IE浏览器（IE 6~IE 8）中，仅能通过window.event才能获取事件对象。

 注意：因为在事件触发时就会产生事件对象，并且系统会以实参的形式传给事件处理函数。所以，在事件处理函数中需要用一个形参来接收事件对象event。

示例代码：

<button id="btn">获取event对象</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function(e) {
    var event = e || window.event;    // 获取事件对象的兼容处理
    console.log(event);
  };
</script>

在IE11的开发人员工具中，通过IE8兼容模式测试，效果如左图所示。在Chrome浏览器中的效果如右图所示：

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

在事件发生后，事件对象event中会包含一些所有事件都有的属性和方法。所有事件基本上都包括的常用的属性和方法如下表所示。

属性	说明	浏览器
e.target	返回触发事件的对象	标准浏览器
e.srcElement	返回触发事件的对象	非标准IE 6-IE 8使用
e.type	返回事件的类型	所有浏览器
e.stopPropagation()	阻止事件冒泡	标准浏览器
e.cancelBubble	阻止事件冒泡	非标准IE 6-IE 8使用
e.preventDefault()	阻止默认事件（默认行为）	标准浏览器
e.returnValue	阻止默认事件（默认行为）	非标准IE 6-IE 8使用

注意：表中的type属性是标准浏览器和早期版本IE浏览器的事件对象的公有属性，通过该属性可以获取发生事件的类型，如click、mouseover等（不带on）

1、对比e.target和this的区别

在事件处理函数中，e.target返回的是触发事件的对象，而this返回的是绑定事件的对象。因为e.target支持IE9以上，所以编写以下代码，处理兼容性问题。

2、默认阻止行为

在实际开发中，为了使程序更加严谨，想要确定含有默认行为的标签符合要求后，才能执行默认行为时，可利用事件对象的preventDefault()方法和returnValue属性，禁止所有浏览器执行元素的默认行为。需要注意的是，只有事件对象的cancelable属性设置为true，才可以使用preventDefault()方法取消其默认行为。

 案例演示：下面我们以禁用<a>标签的链接为例进行演示

<a href="http://www.baidu.com">百度</a>
<script>
  var a = document.querySelector('a'); // 获取a链接对象
  a.addEventListener('click', function (e) { // 注册单击事件
    e.preventDefault();      // DOM标准写法，早期版本浏览器不支持
  });
  // 推荐使用传统的注册方式
  a.onclick = function (e) {
    e.preventDefault();	// 标准浏览器使用e.preventDefault()方法
    e.returnValue;    // 早期版本浏览器（IE6、7、8）使用returnValue属  }
</script>

3、阻止事件冒泡

可以利用事件对象调用stopPropagation()方法和设置cancelBubble属性，实现禁止所有浏览器的事件冒泡行为。

if (window.event) {		// 早期版本的浏览器
  window.event.cancelBubble = true;
} else {				// 标准浏览器
  e.stopPropagation();
}

4、事件委托

事件委托的原理是，不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每个子节点。 简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。 这样做的的优点在于，只操作了一次DOM ，提高了程序的性能。

案例演示：演示事件委托的使用。

<ul>
  <li>我是第 1 个li</li>
  // …此处省略多个<li></li>标签
</ul>
<script>
  var ul = document.querySelector('ul');
  ul.addEventListener('click', function (e) {
    e.target.style.backgroundColor = 'pink';
  });
</script>