事件对象的常见属性和方法 - 前端学习教程_ 前端_前端开发

在事件发生后，事件对象event中不仅包含着与特定事件相关的信息，还会包含一些所有事件都有的属性和方法。所有事件基本上都包括的常用的属性和方法如表1所示。

表1 事件对象属性和方法

属性	说明	浏览器
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使用

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

在讲解了事件对象常用的属性和方法后，下面我们将针对常见的使用场景进行讲解。

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

在事件处理函数中，e.target返回的是触发事件的对象，而this返回的是绑定事件的对象。简而言之，e.target 是哪个元素触发事件了，就返回哪个元素；而 this 是哪个元素绑定了这个事件，就返回哪个元素。

考虑到e.target在IE 9以上才支持，所以编写以下代码，处理兼容性问题。

 1  div.onclick = function(e) {

 2   e = e || window.event;

 3   var target = e.target || e.srcElement;

 4   console.log(target);

 5  };

值得一提的是，this和e.currentTarget的值相同，但考虑到e.currentTarge有兼容性问题（IE 9以上支持），所以在实际开发中推荐使用this。

2. 阻止默认行为

在HTML中，有些元素标签拥有一些特殊的行为。例如，单击<a>标签后，会自动跳转到href属性指定的URL链接；单击表单的submit按钮后，会自动将表单数据提交到指定的服务器端页面处理。因此，我们把标签具有的这种行为称为默认行为。

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

下面我们以禁用<a>标签的链接为例进行演示，具体代码如下。

 1  <body>

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

 3   <script>

 4    var a = document.querySelector('a');

 5    a.addEventListener('click', function (e) {

 6     e.preventDefault();   // DOM标准写法，早期版本浏览器不支持

 7    });

 8    // 推荐使用传统的注册方式

 9    a.onclick = function (e) {

 10    e.preventDefault();  // 标准浏览器使用e.preventDefault()方法

 11    e.returnValue;     // 早期版本浏览器（IE 6~IE 8）使用returnValue属性

 12   };

 13  </script>

 14 </body>

上述代码中，第4行代码获取a链接对象。第5~7行代码使用addEventListener注册单击事件。第6行通过e.preventDefault()方法阻止a链接进行跳转，但是在早期版本浏览器中不支持该写法，所以在第9~12行使用传统注册方式绑定click单击事件。其中，第10行针对标准浏览器使用preventDefault()方式，第11行针对低版本浏览器使用returnValue属性。

值得一提的是，针对于传统注册方式绑定事件，也可以使用return false来阻止默认事件。优点在于没有兼容性问题，缺点是return后面的代码不执行，而且只限于传统的注册方式。

3. 阻止事件冒泡

如果在开发中想要阻止事件冒泡，则可以利用事件对象调用stopPropagation()方法和设置cancelBubble属性，实现禁止所有浏览器的事件冒泡行为。

例如，为单击事件的事件处理程序添加参数e，用于获取事件对象，并且在控制台输出前添加以下代码。

if (window.event) {   // 早期版本的浏览器

 window.event.cancelBubble = true;

} else {         // 标准浏览器

 e.stopPropagation();

}

上述第1行代码用于判断当前是否为早期版本的IE浏览器，如果是，则利用事件对象调用cancelBubble属性阻止事件冒泡；否则利用事件对象e调用stopPropagation()方法完成事件冒泡的阻止设置。

4. 事件委托

在现实生活中，有时快递员为了节省时间，会把快递放到某快递代收机构，然后让客户自行去领取，这种把事情委托给别人的方式，就是代为处理。事件委托（或称为事件代理）也是如此。事件委托的原理是，不给每个子节点单独设置事件监听器，而是把事件监听器设置在其父节点上，让其利用事件冒泡的原理影响到每个子节点。简而言之，就是不给子元素注册事件，给父元素注册事件，让处理代码在父元素的事件中执行。这样做的优点在于，只操作了一次DOM ，提高了程序的性能。

下面我们通过案例演示事件委托的使用，示例代码如下。

 1  <body>

 2   <ul>

 3    <li>我是第 1 个li</li>

 4    <li>我是第 2 个li</li>

 5    <li>我是第 3 个li</li>

 6    <li>我是第 4 个li</li>

 7    <li>我是第 5 个li</li>

 8   </ul>

 9   <script>

 10   var ul = document.querySelector('ul');

 11   ul.addEventListener('click', function (e) {

 12    e.target.style.backgroundColor = 'pink';

 13   });

 14  </script>

 15 </body>

上述代码中，第10~13行代码采用事件委托原理，首先获取到ul父元素，并且在第11行给父元素绑定单击事件，实现单击子元素li时，给当前项改变背景色。