为同一个元素绑定多个不同的事件，指向相同的事件处理函数

原创于 2019-10-15 20:45:34 发布 · 551 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种在JavaScript中为同一DOM元素同时绑定多个事件（click、mouseover、mouseout）的方法，并通过一个示例展示了如何使用自定义函数根据事件类型进行响应处理。

<input type="button" value="小苏" id="btn"/>
<script src="common.js"></script>
<script>
//为id为btn的按钮同时绑定三个事件，分别是click、mouseover、mouseout事件
  my$("btn").onclick = f1;
  my$("btn").onmouseover = f1;
  my$("btn").onmouseout = f1;
//都指向同一个处理函数f1
  function f1(e) {
//根据对象e的类型来触发响应的事件
    switch (e.type) {
      case "click":
        alert("我被点击了");
        break;
      case "mouseover":
        this.style.backgroundColor = "red";
        break;
      case "mouseout":
        this.style.backgroundColor = "green";
        break;
    }
  }
</script>
</body>