菜鸟教程
教程 jquery tutorial

绑定事件

jQuery 提供简洁的方法来绑定各种事件，使网页具备响应用户操作的能力。

常用事件绑定方法

  • on() — 推荐的通用事件绑定方法
js 
  $("button").on("click", function () {
    alert("按钮被点击了！");
  });
  • 直接绑定简写方法，如 click()
js 
  $("button").click(function () {
    alert("按钮被点击！");
  });

支持的常见事件类型

  • click — 鼠标点击事件
  • mouseenter 和 mouseleave — 鼠标进入和离开事件
  • focus 和 blur — 元素获得和失去焦点
  • submit — 表单提交事件
  • keydown、keyup — 键盘按键事件

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(function () {
    // 使用 on 绑定点击事件
    $("#btn").on("click", function () {
      alert("按钮被点击！");
    });
    // 鼠标移入和移出改变背景色
    $("#hoverDiv")
      .on("mouseenter", function () {
        $(this).css("background-color", "lightblue");
      })
      .on("mouseleave", function () {
        $(this).css("background-color", "");
      });
  });
</script>

<button id="btn">点击我</button>
<div
id="hoverDiv"
style="width: 200px; height: 100px; border: 1px solid #ccc; margin-top: 10px"
>
鼠标移入移出我试试
</div>

相关内容