JavaScript 中的event事件对象 (javascript红皮书二刷 - Ch13.3 事件对象)

红皮书中对事件对象的描述：

触发DOM事件时会产生一个 event 事件对象并传入到事件处理程序中。

获取事件类型 type

需要一个函数处理多个事件时, 可以使用 event 对象的 type 属性, 实例代码如下：

var btn = document.getElementById("btn")
var handler = function(event) { // 将event设置为函数参数即可传入数据
	switch(event.type) {
		case "click":
			console.log("clicked")
			break
		case "mouseover":
			console.log("mouseover")
			break
		case "mouseout":
			console.log("mouseout")
			break
	}
}

btn.onclick = handler
btn.onmouseover = handler
btn.onmouseout = handler

取消默认事件的方法

有时默认的标签会进行一些自带的事件和操作, 执行 preventDefault() 方法方可阻止默认事件的发生。

var link = document.getElementById("myLink")
link.onclick = function(event) {
	event.preventDefault()
}

取消事件往上级传递

当 body 内部的 button 被点击, 点击事件将会一级一级往上传递到 body 中。

var btn = document.getElementById("btn")
btn.onclick = function(event) {
	event.stopPropagation()
}

document.body.onclick = function() {
	console.log("clicked")
}