为同一个元素，添加相同名字的处理函数的不同绑定事件—通过switch语法

最新推荐文章于 2024-08-25 23:40:41 发布

原创最新推荐文章于 2024-08-25 23:40:41 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

前端开发也蛮有意思的同时被 2 个专栏收录

82 篇文章

订阅专栏

Javascript

27 篇文章

订阅专栏

本文深入探讨了JavaScript中事件绑定的方法，通过具体实例展示了如何使用switch和break语句结合事件类型进行有效的事件处理。文章重点讲解了不同事件类型的响应方式，如click、mouseover和mouseout，并演示了如何改变元素背景色及弹出提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要点：

1.switch语法跟break语法结合使用，才能达到效果，满足条件后，执行出路函数，然后跳出循环。

2.这里的.type是返回的是事件的绑定类型，如click。区别与typeof 判断的是值的类型，如 "undefined"。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<input type="button" value="点我不花一分钱" id="btn">

	<script type="text/javascript">
		function myGet(id){
			return document.getElementById(id);
		}
        
        myGet("btn").onclick = f1;
        myGet("btn").onmouseover = f1;
        myGet("btn").onmouseout = f1;

        function f1(e){
        	switch (e.type){
        	   //通过.type判断事件的类型，而做出相应的switch和case对应的操作
               case "click": alert("装备不花一分钱");
               break;
               case "mouseover": this.style.backgroundColor = "blue";
               break;
               case "mouseout": this.style.backgroundColor = "yellow";
        	}
        	// 这里一定要注意，绑定事件类型的名字本来前面就不带on，这是微软的特例，其他浏览器是为了兼容
        }
	</script>
</body>
</html>

效果：