小菜鸟

java菜鸟号正在起航

0%

jQuery事件

发表于 更新于 分类于 阅读次数： Valine：
本文字数： 12k 阅读时长 ≈ 11 分钟

jQuery 事件详解：从绑定到高级应用的实战指南

jQuery 事件系统是其核心功能之一，它封装了原生 JavaScript 事件处理的复杂性，提供了简洁、统一的 API 用于 “绑定事件、处理事件交互、移除事件”，同时解决了不同浏览器间的兼容性问题。从 “基础事件机制→核心 API 详解→实战场景→性能优化” 四个维度，系统讲解 jQuery 事件的使用方法与最佳实践，帮你高效处理页面交互逻辑。

jQuery 事件基础：加载事件（文档就绪）

在处理 DOM 事件前，需确保 “DOM 结构已完全解析”—— 否则可能出现 “事件绑定到不存在元素” 的问题。jQuery 提供的 $(document).ready() 是解决此问题的核心方法，也是所有事件操作的 “入口”。

1. 加载事件的核心作用

  • 触发时机：当 HTML 文档的 DOM 树构建完成后立即执行（无需等待图片、样式表、iframe 等外部资源加载）；
  • 对比原生 window.onload：window.onload 需等待页面所有资源（包括大图片）加载完成后才执行，触发时机远晚于 $(document).ready()；
  • 核心优势：
    1. 执行时机早，提升页面交互响应速度；
    2. 支持多次调用（多个 $(document).ready() 会按顺序执行），而 window.onload 仅执行最后一个；
    3. 语法简洁，可简写为 $(function(){})。

2. 加载事件的三种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 写法1：完整语法（明确绑定到 document 的 ready 事件）
$(document).ready(function() {
  // DOM 就绪后执行的代码（如事件绑定、DOM 操作）
  $("button").click(function() {
    alert("按钮被点击");
  });
});

// 写法2：简写语法（推荐，jQuery 约定俗成的写法）
$(function() {
  // 与写法1功能完全一致，代码更简洁
  $("input").val("DOM 已就绪");
});

// 写法3：传递一个命名函数（适合代码量大的场景，便于维护）
function init() {
  // 初始化逻辑
  $("#box").text("初始化完成");
}
$(document).ready(init); // 注意：此处传递函数名，不要加 ()

3. 注意事项

  • 必须包裹事件代码：所有涉及 DOM 操作或事件绑定的代码，都应放在 $(function(){}) 内部，否则可能因 DOM 未就绪导致报错；
  • 避免嵌套使用：无需在一个 $(function(){}) 内部嵌套另一个 $(function(){})，多余嵌套会增加代码复杂度且无意义；
  • 外部资源处理：若需等待图片加载完成（如获取图片尺寸），仍需使用 window.onload 或 $("img").load()。

jQuery 事件核心：事件绑定与触发

事件绑定是 “为元素绑定特定交互行为” 的过程（如点击按钮弹出提示、输入文本实时验证）。jQuery 提供了多种事件绑定方法，从早期的 bind() 到现代的 on()（推荐），满足不同场景需求。

1. 基础事件绑定：bind() 与简化方法

bind() 是 jQuery 早期的事件绑定方法，用于为匹配元素绑定一个或多个事件处理函数。

（1）bind() 方法语法
1
2
3
4
5
6
7
8
9
10
11
// 语法1：绑定单个事件（事件类型 + 处理函数）
$("选择器").bind("事件类型", function(event) {
  // 事件处理逻辑
  console.log("事件触发");
});

// 语法2：绑定多个事件（对象形式，键为事件类型，值为处理函数）
$("选择器").bind({
  "事件类型1": function() {},
  "事件类型2": function() {}
});
（2）常见事件类型
事件类型 触发场景 简化方法（替代 bind (“类型”, fn)）
click 鼠标单击元素 $ele.click(fn)
dblclick 鼠标双击元素 $ele.dblclick(fn)
mouseover 鼠标移入元素 $ele.mouseover(fn)
mouseout 鼠标移出元素 $ele.mouseout(fn)
focus 元素获得焦点（如输入框被点击） $ele.focus(fn)
blur 元素失去焦点（如输入框失焦） $ele.blur(fn)
keydown 键盘按下时 $ele.keydown(fn)
input 输入框内容变化时（实时监听） $ele.input(fn)
（3）示例：bind() 与简化方法对比
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function() {
  // 1. 使用 bind() 绑定点击事件
  $("#btn1").bind("click", function() {
    alert("bind() 绑定的点击事件");
  });

  // 2. 使用简化方法 click() 绑定（推荐，代码更简洁）
  $("#btn2").click(function() {
    alert("简化方法绑定的点击事件");
  });

  // 3. 使用 bind() 绑定多个事件
  $("#input1").bind({
    focus: function() {
      $(this).css("border", "1px solid blue"); // 获焦时边框变蓝
    },
    blur: function() {
      $(this).css("border", "1px solid #ccc"); // 失焦时边框恢复
    }
  });
});
（4）bind() 的局限性
  • 不支持动态元素：bind() 仅能为 “绑定事件时已存在的元素” 绑定事件，无法为后续动态创建的元素（如通过 append() 添加的元素）绑定事件；
  • 性能一般：对于大量元素（如列表项），bind() 会为每个元素单独绑定事件，消耗更多内存；
  • 现代替代方案：jQuery 1.7+ 推荐使用 on() 方法替代 bind()，on() 支持动态元素且性能更优。

2. 现代事件绑定：on() 方法（推荐）

on() 是 jQuery 1.7 引入的 “统一事件绑定方法”，整合了 bind()、live()、delegate() 的功能，支持 “静态元素” 和 “动态元素” 的事件绑定，是目前推荐的标准方法。

（1）on() 方法语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 语法1：为静态元素绑定事件（与 bind() 类似）
$("静态元素选择器").on("事件类型", function(event) {
  // 事件处理逻辑
});

// 语法2：为动态元素绑定事件（事件委托，关键！）
$("静态父元素选择器").on("事件类型", "动态子元素选择器", function(event) {
  // 事件处理逻辑（this 指向动态子元素）
});

// 语法3：绑定多个事件
$("选择器").on({
  "事件1": function() {},
  "事件2": function() {}
});
（2）核心优势：事件委托（处理动态元素）

“事件委托” 是利用 事件冒泡机制，将子元素的事件委托给 “静态父元素” 处理 —— 即使子元素是后续动态创建的，只要触发事件，父元素会将事件 “委托” 给子元素的处理函数，解决了 bind() 无法处理动态元素的问题。

（3）示例：动态元素的事件绑定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<ul id="todoList">
  <!-- 初始静态元素 -->
  <li>学习 jQuery 事件 <button class="delete">删除</button></li>
</ul>
<button id="addItem">添加任务</button>

<script>
$(function() {
  // 1. 动态添加任务（点击按钮新增 li）
  $("#addItem").click(function() {
    var newLi = $("<li>新任务 " + new Date().getSeconds() + " <button class='delete'>删除</button></li>");
    $("#todoList").append(newLi);
  });

  // 2. 为删除按钮绑定事件（动态元素，使用事件委托）
  // 父元素 #todoList 是静态的，委托处理子元素 .delete 的 click 事件
  $("#todoList").on("click", ".delete", function() {
    // this 指向被点击的 .delete 按钮（动态或静态）
    $(this).parent("li").remove(); // 删除当前任务
  });
});
</script>

关键解析：

  • 新增的 li 中的 .delete 按钮是动态创建的，若用 $(".delete").click() 绑定，新增按钮不会有点击事件；
  • 通过 $("#todoList").on("click", ".delete", fn)，将事件委托给静态父元素 #todoList，所有 .delete 按钮（无论静态还是动态）点击时都会触发事件。

3. 事件对象（event 参数）

事件处理函数的第一个参数是 事件对象（通常命名为 event），包含事件的详细信息（如触发元素、鼠标位置、键盘按键等），常用属性和方法如下：

属性 / 方法 作用描述 示例
event.target 事件的实际触发元素（DOM 对象） $(event.target).text() 获取触发元素文本
event.currentTarget 事件绑定的元素（即 this，DOM 对象） $(event.currentTarget).attr("id")
event.type 事件类型（如 “click”、”focus”） console.log(event.type)
event.pageX/event.pageY 鼠标触发事件时的页面坐标（相对于文档左上角） console.log("X:" + event.pageX)
event.keyCode 键盘事件中按下的键的 ASCII 码（如 Enter 是 13） if(event.keyCode === 13) { ... }
event.preventDefault() 阻止事件的默认行为（如表单提交、链接跳转） event.preventDefault()
event.stopPropagation() 阻止事件冒泡（避免父元素触发相同事件） event.stopPropagation()
示例：阻止表单默认提交
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form id="loginForm">
  <input type="text" name="username" required>
  <button type="submit">登录</button>
</form>

<script>
$(function() {
  $("#loginForm").submit(function(event) {
    // 阻止表单默认提交行为（避免页面刷新）
    event.preventDefault();

    // 自定义表单验证逻辑
    var username = $("input[name='username']").val();
    if (!username) {
      alert("请输入用户名");
      return;
    }

    // 验证通过后，可通过 AJAX 提交表单（后续学习）
    alert("表单验证通过，准备提交");
  });
});
</script>

4. 事件触发

除了用户操作触发事件（如点击、输入），还可通过 jQuery 方法手动触发事件（如模拟点击、模拟获焦），常用方法：

  • $ele.trigger("事件类型")：触发指定事件；
  • 简化方法：$ele.click()（触发点击）、$ele.focus()（触发获焦）等。
示例：手动触发事件
1
2
3
4
5
6
7
8
9
10
11
$(function() {
  // 1. 绑定点击事件
  $("#btn").click(function() {
    alert("按钮被触发（用户点击或手动触发）");
  });

  // 2. 页面加载完成后，手动触发按钮的点击事件
  setTimeout(function() {
    $("#btn").trigger("click"); // 等同于 $("#btn").click();
  }, 2000); // 2 秒后自动触发
});

jQuery 合成事件：简化常用交互

合成事件是 jQuery 封装的 “组合式事件”，将多个相关事件（如鼠标移入 / 移出、连续点击）合并为一个方法，简化代码编写，hover() 和 toggle() 是典型代表。

1. hover()：鼠标悬停与移出事件

hover() 是 mouseover 和 mouseout 事件的合成，专门处理 “鼠标移入元素触发一个函数，移出元素触发另一个函数” 的场景，语法简洁，无需分别绑定两个事件。

语法与示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 语法：$ele.hover(移入时函数, 移出时函数)
$("选择器").hover(
  function() {
    // 鼠标移入时执行（this 指向当前元素）
  },
  function() {
    // 鼠标移出时执行（this 指向当前元素）
  }
);

// 实际示例：导航菜单悬停效果
$(function() {
  $("nav li").hover(
    function() {
      // 移入时：显示子菜单，背景变色
      $(this).css("background", "#f5f5f5").find(".submenu").show();
    },
    function() {
      // 移出时：隐藏子菜单，背景恢复
      $(this).css("background", "transparent").find(".submenu").hide();
    }
  );
});
注意：与 mouseenter/mouseleave 的区别
  • mouseover/mouseout 会触发事件冒泡（鼠标移入子元素时，父元素也会触发）；
  • hover() 内部实际使用的是 mouseenter/mouseleave（不会冒泡），更适合处理 “元素整体悬停”（如导航菜单、卡片），无需手动阻止冒泡。

2. toggle()：连续点击切换事件（废弃注意）

toggle() 是早期 jQuery 中的合成事件，用于 “连续点击同一个元素时，依次触发多个函数”（如第一次点击执行 fn1，第二次执行 fn2，第三次执行 fn1，循环往复）。

早期语法与示例（jQuery 1.8 前）
1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
  $("#box").toggle(
    function() {
      $(this).css("background", "red"); // 第一次点击：变红
    },
    function() {
      $(this).css("background", "blue"); // 第二次点击：变蓝
    },
    function() {
      $(this).css("background", "green"); // 第三次点击：变绿
    }
  );
});
重要注意：toggle() 已废弃

  • jQuery 1.8 开始，toggle() 方法被重写为 “显示 / 隐藏元素” 的方法（替代 show()/hide() 的切换），原 “连续点击切换事件” 的功能被移除；

  • 若需实现 “连续点击切换” 功能，需手动通过 “状态标记” 实现，示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $(function() {
      var isRed = true; // 状态标记：记录当前颜色
      $("#box").click(function() {
        if (isRed) {
          $(this).css("background", "blue");
          isRed = false;
        } else {
          $(this).css("background", "red");
          isRed = true;
        }
      });
    });

jQuery 事件移除：避免内存泄漏

当元素被移除或页面卸载时，若未移除绑定的事件，可能导致 “内存泄漏”（事件处理函数未被垃圾回收）。jQuery 提供 unbind() 和 off() 方法用于移除已绑定的事件。

1. 早期方法：unbind()

unbind() 是 bind() 的对应方法，用于移除通过 bind() 绑定的事件，语法：

1
2
3
4
5
6
7
8
9
10
11
12
// 语法1：移除元素的所有事件
$("选择器").unbind();

// 语法2：移除元素的指定类型事件（如 click）
$("选择器").unbind("事件类型");

// 语法3：移除元素指定类型的指定处理函数（需传入原函数引用）
function handleClick() {
  alert("点击事件");
}
$("选择器").bind("click", handleClick);
$("选择器").unbind("click", handleClick); // 仅移除 handleClick 函数

2. 现代方法：off()（推荐）

off() 是 on() 的对应方法，支持移除通过 on() 绑定的所有事件（包括事件委托），语法与 on() 对应，更灵活：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 语法1：移除元素的所有事件
$("选择器").off();

// 语法2：移除元素的指定类型事件
$("选择器").off("事件类型");

// 语法3：移除事件委托（需指定父元素、事件类型、子元素选择器）
$("静态父元素").off("事件类型", "动态子元素选择器");

// 语法4：移除指定处理函数
function handleClick() {
  alert("点击");
}
$("选择器").on("click", handleClick);
$("选择器").off("click", handleClick);
示例：移除事件委托
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
  // 1. 绑定事件委托
  $("#todoList").on("click", ".delete", function() {
    $(this).parent("li").remove();
  });

  // 2. 某个条件下（如点击“禁用删除”按钮），移除事件委托
  $("#disableDelete").click(function() {
    $("#todoList").off("click", ".delete"); // 移除 .delete 的点击事件
    alert("删除功能已禁用");
  });
});

3. 一次性事件：one()

若希望事件 “仅触发一次”（触发后自动移除），可使用 one() 方法（无需手动调用 off()），语法与 on() 类似：

1
2
3
4
5
6
$(function() {
  // 点击按钮仅触发一次事件（触发后自动移除事件绑定）
  $("#btn").one("click", function() {
    alert("该按钮仅能点击一次");
  });
});

jQuery 事件实战场景

场景 1：表单实时验证（input 事件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<input type="text" id="username" placeholder="请输入用户名（至少3个字符）">
<div id="tip" style="color: red;"></div>

<script>
$(function() {
  // 实时监听输入框内容变化
  $("#username").input(function() {
    var username = $(this).val().trim();
    var tip = $("#tip");

    if (username.length === 0) {
      tip.text("用户名不能为空");
    } else if (username.length < 3) {
      tip.text("用户名至少3个字符");
    } else {
      tip.text("").css("color", "green").text("用户名可用");
    }
  });
});
</script>

场景 2：键盘事件（按 Enter 键提交表单）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<input type="text" id="searchInput" placeholder="输入关键词，按 Enter 搜索">

<script>
$(function() {
  $("#searchInput").keydown(function(event) {
    // 监听 Enter 键（keyCode 为 13）
    if (event.keyCode === 13) {
      event.preventDefault(); // 阻止默认换行行为
      var keyword = $(this).val().trim();
      if (keyword) {
        alert("搜索关键词：" + keyword);
        // 此处可添加 AJAX 搜索逻辑
      } else {
        alert("请输入搜索关键词");
      }
    }
  });
});
</script>

场景 3：鼠标拖动元素（mousedown/mousemove/mouseup）

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
26
27
28
29
30
31
32
33
34
35
36
<div id="dragBox" style="width: 100px; height: 100px; background: red; position: absolute; cursor: move;"></div>

<script>
$(function() {
  var isDragging = false; // 是否正在拖动
  var offsetX, offsetY; // 鼠标相对于元素的偏移量

  // 1. 鼠标按下元素：开始拖动
  $("#dragBox").mousedown(function(event) {
    isDragging = true;
    // 计算鼠标相对于元素左上角的偏移量
    offsetX = event.pageX - $(this).offset().left;
    offsetY = event.pageY - $(this).offset().top;
  });

  // 2. 鼠标移动：拖动元素
  $(document).mousemove(function(event) {
    if (!isDragging) return; // 未按下时不执行

    // 计算元素新的位置（鼠标位置 - 偏移量）
    var left = event.pageX - offsetX;
    var top = event.pageY - offsetY;

    // 设置元素位置
    $("#dragBox").css({
      left: left + "px",
      top: top + "px"
    });
  });

  // 3. 鼠标松开：结束拖动
  $(document).mouseup(function() {
    isDragging = false;
  });
});
</script>

总结与最佳实践

1. 核心总结

  • 加载事件：优先使用 $(function(){})，确保 DOM 就绪后执行事件代码；
  • 事件绑定：jQuery 1.7+ 推荐使用 on() 方法，支持静态 / 动态元素，通过 “事件委托” 处理动态元素；
  • 合成事件：hover() 用于悬停交互（内部用 mouseenter/mouseleave），toggle() 事件功能已废弃，需手动实现切换；
  • 事件移除：使用 off() 移除 on() 绑定的事件，避免内存泄漏；一次性事件用 one()。

2. 最佳实践建议

  1. 优先使用事件委托：对于列表、动态元素，始终通过 “静态父元素 + on()” 实现事件委托，减少事件绑定次数，提升性能；
  2. 缓存选择器：避免在事件处理函数中重复调用选择器（如 $("#box")），缓存到变量中（如 var $box = $("#box")）；
  3. 及时移除事件：当元素被动态删除（如 remove()）前，若绑定了复杂事件，建议先调用 off() 移除事件，避免内存泄漏；
  4. 避免过度事件绑定：同一元素的同一事件（如 click）不要重复绑定，否则会触发多次处理函数；
  5. 使用事件对象的 target 优化：当多个子元素触发同一事件时，通过 event.target 判断具体触发元素，减少事件绑定数量（如表格行内多个按钮共享一个事件处理函数）
相关文章

欢迎关注我的其它发布渠道