WebAPI-事件对象参数

概述

事件触发后就会产生事件对象，与事件相关的信息都会存储在一个对象中；这个对象会以参数的形式传给事件处理函数，所以事件处理函数默认会有一个事件对象参数；想要使用这个事件对象只要给事件处理函数定义一个形参即可。

举个栗子：

<button id="btn">按钮</button>

<script>
	function $(selector) {
		return document.querySelector(selector)
	}
	// 添加点击事件
	$('#btn').onclick = function(e) { // 设置形参获取事件对象
		// 打印事件对象
		console.log(e)
	}
</script>

上面的例子是标准浏览器获取事件对象的方法，对于 IE 这个佬榴芒来说，IE6~IE8 不支持参数的形式获取事件对象。

IE6~IE8 获取事件对象是通过 window.event 来获取事件对象

<button id="btn">按钮</button>

<script>
	function $(selector) {
		return document.querySelector(selector)
	}
	// 添加点击事件
	$('#btn').onclick = function() { // 设置形参获取事件对象
		// 打印事件对象
		console.log(window.event)
	}
</script>

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

• e.target 获取触发此事件的元素（事件的目标节点），不一定是绑定事件的元素
• e.srcElement 同 e.target 不是标准的属性， IE6~IE8 使用
• e.type 返回事件的类型，不带前缀 on
• e.cancelBubble 用于阻止事件冒泡，非标准属性 IE6~IE8 使用；将属性赋值为 true 即可阻止事件冒泡
• e.returnValue 该属性用于阻止事件的默认行为，例如 a 标签的默认跳转；是非标准的属性 IE6~IE8 使用
• e.preventDefault() 阻止事件的默认行为，标准的方法
• e.stopPropagation() 该方法用于阻止事件冒泡，标准的方法