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

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 281 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何利用DOM事件对象处理多种事件类型，包括通过type属性区分不同事件、使用preventDefault()取消默认事件行为以及使用stopPropagation()阻止事件冒泡等实用技巧。

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

触发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")
}