登录  /  注册
博主信息
博文 3
粉丝 0
评论 0
访问量 2735
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JavaScript中怎么才能为同一个元素绑定多个不同事件
kongkruye
原创
794人浏览过

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

2.思路来源于:

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

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

4.png

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学