小知识，大挑战！本文正在参与「程序员必备小知识」创作活动，本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

下述内容所属本专栏系列-第七部分 DOM下

7.7_事件对象

7.7.1_什么是事件对象

当一个事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是 event。只有有了事件，event 才会存在，它是系统自动创建的，不需要传递参数。
事件对象是事件一系列相关数据的集合，例如，鼠标单击的事件对象，就包含了鼠标的相关信息，如鼠标指针坐标等。如果是键盘事件，事件对象中就包含键盘事件的相关信息，例如，用户按下了哪个键，事件对象中就会包括按下键的键值等相关信息。

7.7.2_事件对象的使用

虽然所有浏览器都支持事件对象 event，但是不同的浏览器获取事件对象的方式不同。

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

var 事件对象 = window.event // 早期IE内核浏览器
DOM 对象.事件 = function (event) {  } // W3C内核浏览器

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

案例：以获取 button 按钮单击事件的事件对象为例演示，

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<button id="btn">获取event对象</button>
		
		<script>
			
			var btn = document.getElementById('btn');
			btn.onclick = function(e) {
				var event = e || window.event; // 获取事件对象的兼容处理
				console.log(event);
			}
			
		</script>
			
	</body>
</html>

在这里插入图片描述
点击按钮后，

上述代码中，根据 id 属性值获取 button 按钮的元素对象。
通过动态绑定式为按钮添加单击事件。其中，事件处理函数中传递的参数 e ( 参数名称只要符合变量定义的规则即可 ) 表示的就是事件对象 event 。
通过 “ 或 ” 运算符实现不同浏览器间获取事件对象兼容的处理。若是标准浏览器，则可以直接通过 e 获取事件对象；若是早期版本的 IE 浏览器 (IE 6 ~ IE 8) 则需要通过 window.event 才能获取事件对象。

7.7.3_事件对象的常用属性和方法

在事件发生后，事件对象 event 中不仅包含着与特定事件相关的信息，还会包含一些所有事件都有的属性和方法。

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

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

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

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

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

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

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

好好看明白~！

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>		
		
		<script>
			
			div.onclick = function(e) {
				e = e || window.event;
				var target = e.target || e.srcElement;
				console.log(target);
			}
			
		</script>
			
	</body>
</html>

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

2. 阻止默认行为

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

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

案例：以禁用 < a> 标签的链接为例进行演示，

<body>
<a href="http://www.baidu.com">百度</a>
<script>
var a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault(); // DOM标准写法，早期版本浏览器不支持
});
//推荐使用传统的注册方式
a.onclick = function (e) {
e.preventDefault();  // 标准浏览器使用e.preventDefault()方法
e.returnValue;  // 早期版本浏览器(IE6 ~ IE8)使用returnValue属性
};
</script>
</body>

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

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

3. 阻止事件冒泡

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

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

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

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

4. 事件委托

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

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

<body>
<ul>
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
<li>我是第4个li</li>
<li>我是第5个li</li>
</u1>
<script>
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
e.target.style.backgroundColor = 'pink';
});
</script>
</body>

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

🌊🌈往期回顾：

HTML入门指南学习专栏「已完结」:

Javascript入门指南学习专栏「更新中」:

🌊🌈关于后记：

感激相遇你好我是阿ken
个人微信：wlpchaojibang 有问题请随时与我交流，一个人可以走的很快，但一群人才可以走的更远!

「关注」：提高学习效率！

👍🏻：原创不易，适当鼓励！

⭐：收藏文章，温故知新！

💬：评论交流，共同进步！

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（二十二）