学科分类
目录
JavaScript网页编程

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

在事件发生后,事件对象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时,给当前项改变背景色。

点击此处
隐藏目录