JavaScript如何为同一个元素绑定多个不同事件，指向同一个事件处理函数

最新推荐文章于 2023-03-30 20:55:52 发布

Poetry Code

最新推荐文章于 2023-03-30 20:55:52 发布

阅读量8.7k

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript 前端事件

本文链接：https://blog.csdn.net/weixin_44253336/article/details/98759854

版权

JavaScript 专栏收录该内容

24 篇文章 3 订阅

订阅专栏

1.源码：

<body>
<input type="button" value="点击" id="btn">


<script>
    //为同一个元素绑定多个不同的事件，指向相同的事件处理函数
    document.getElementById("btn").onclick = f1;
    document.getElementById("btn").onmouseover = f1;
    document.getElementById("btn").onmouseout = f1;

    function f1(e) {
        switch (e.type) {
            case "click":
                alert("hehe");
                break;
            case "mouseover":
                this.style.backgroundColor = "red";
                break;
            case "mouseout":
                this.style.backgroundColor = "yellow";
                break;
        }
    }
</script>
</body>

2.思路来源于：

  document.getElementById("btn").onclick = function (e) {
                console.log(e);
        };
        // type: "click"

在事件参数对象中，里面有很多属性，当我们把它输出后可以看到有一个属性为type: “click”。不同事件里面的type类型值都是不一样的。用switch语句我们就可以根据type值自动选择不同的事件进行处理。
在这里插入图片描述

Poetry Code

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录