jQuery 入门学习教程，从入门到精通，jQuery事件操作 —— 全面知识点详解与案例代码(5）

最新推荐文章于 2025-10-31 17:31:12 发布

原创最新推荐文章于 2025-10-31 17:31:12 发布 · 456 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #学习 #前端 #小程序 #javascript #vue #html5

前端开发同时被 3 个专栏收录

253 篇文章

订阅专栏

网页开发

226 篇文章

订阅专栏

jQuery

7 篇文章

订阅专栏

jQuery事件操作 —— 全面知识点详解与案例代码

一、事件基础

1.1 什么是事件？

在网页中，用户与页面交互（如点击、输入、滚动等）会触发“事件”，jQuery 提供了统一、简洁的 API 来绑定和处理这些事件。

1.2 事件绑定语法

jQuery 使用 .on() 方法统一处理事件绑定（推荐），也支持简写方法如 .click()、.keydown() 等（内部仍调用 .on()）。

示例：基础事件绑定

<button id="btn">点击我</button>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('#btn').on('click', function() {
    alert('按钮被点击了！');
  });
</script>

✅ 注：推荐使用 .on() 而非 .click()，因为 .on() 支持事件委托、命名空间等高级功能。

二、页面载入事件

2.1 `$(document).ready()`

确保 DOM 加载完成后再执行 JS，避免操作未存在的元素。

语法

$(document).ready(function() {
  // DOM 已就绪
});
// 或简写
$(function() {
  // DOM 已就绪
});

示例

<div id="content"></div>
<script>
$(function() {
  $('#content').text('页面已加载完成！');
});
</script>

⚠️ 注意：$(document).ready() 与 window.onload 不同，前者只等 DOM 加载，后者等所有资源（图片等）加载完。

三、鼠标事件

事件	说明
`click`	单击
`dblclick`	双击
`mousedown` / `mouseup`	鼠标按下/释放
`mouseenter` / `mouseleave`	进入/离开元素（不冒泡）
`mouseover` / `mouseout`	进入/离开元素（会冒泡）

示例：鼠标事件综合

<div id="box" style="width:100px; height:100px; background:red;"></div>
<p id="log"></p>

<script>
$('#box')
  .on('mouseenter', function() {
    $('#log').append('进入<br>');
  })
  .on('mouseleave', function() {
    $('#log').append('离开<br>');
  })
  .on('click', function() {
    $('#log').append('点击<br>');
  });
</script>

四、键盘事件

事件	触发时机
`keydown`	按下键（可重复触发）
`keypress`	按下可打印字符键（已废弃）
`keyup`	松开键

示例：监听回车键

<input type="text" id="input">
<p id="output"></p>

<script>
$('#input').on('keyup', function(e) {
  if (e.which === 13) { // 13 是 Enter 键的键码
    $('#output').text('你按了回车！');
  }
});
</script>

五、表单事件

事件	说明
`focus` / `blur`	获得/失去焦点
`change`	表单值改变（失去焦点后触发）
`input`	输入时实时触发（HTML5）
`submit`	表单提交

示例：表单验证

<form id="myForm">
  <input type="text" name="username" required>
  <button type="submit">提交</button>
</form>

<script>
$('#myForm').on('submit', function(e) {
  const val = $('input[name="username"]').val();
  if (val.trim() === '') {
    alert('用户名不能为空！');
    e.preventDefault(); // 阻止默认提交
  }
});
</script>

六、滚动事件

监听 scroll 事件，常用于懒加载、回到顶部等。

示例：监听页面滚动

<div style="height:2000px; background:linear-gradient(to bottom, white, lightblue);"></div>
<button id="topBtn" style="position:fixed; bottom:20px; right:20px; display:none;">回到顶部</button>

<script>
$(window).on('scroll', function() {
  if ($(this).scrollTop() > 300) {
    $('#topBtn').show();
  } else {
    $('#topBtn').hide();
  }
});

$('#topBtn').on('click', function() {
  $('html, body').animate({ scrollTop: 0 }, 300);
});
</script>

七、Event 对象详解

事件处理函数的第一个参数是 Event 对象，包含事件详细信息。

7.1 鼠标指针坐标

e.pageX / e.pageY：相对于文档的坐标
e.clientX / e.clientY：相对于视口的坐标

示例：显示鼠标位置

$(document).on('mousemove', function(e) {
  $('#pos').text(`X: ${e.pageX}, Y: ${e.pageY}`);
});

7.2 键盘键值

e.which：兼容性获取按键码（推荐）
e.key：获取按键字符（现代浏览器）

示例：

$(document).on('keydown', function(e) {
  console.log('键码:', e.which, '字符:', e.key);
});

7.3 阻止冒泡

e.stopPropagation(); // 阻止事件向上冒泡

7.4 阻止默认事件

e.preventDefault(); // 如阻止链接跳转、表单提交

7.5 事件源

e.target：实际触发事件的元素（可能不是绑定元素）
this：绑定事件的元素

示例：区分 target 与 this

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

<script>
$('#list').on('click', function(e) {
  console.log('this:', this);      // <ul>
  console.log('target:', e.target); // <li>
});
</script>

八、事件高级用法

8.1 `on()` 与 `off()` 方法

`on()` 语法：

$(selector).on(events, [selector], [data], handler)

`off()` 用于解绑：

$('#btn').off('click'); // 解绑所有 click 事件

示例：带命名空间的绑定与解绑

$('#btn').on('click.myPlugin', function() {
  console.log('插件绑定的点击');
});

// 只解绑 myPlugin 命名空间的 click
$('#btn').off('click.myPlugin');

8.2 事件委托（Event Delegation）

将事件绑定在父元素上，利用冒泡机制处理子元素事件，适用于动态添加的元素。

示例：动态添加按钮仍可点击

<ul id="todoList"></ul>
<button id="addBtn">添加任务</button>

<script>
let id = 1;
$('#addBtn').on('click', function() {
  $('#todoList').append(`<li><button class="del">删除 ${id++}</button></li>`);
});

// 使用事件委托
$('#todoList').on('click', '.del', function() {
  $(this).closest('li').remove();
});
</script>

✅ 优势：只需绑定一次，新元素自动生效。

8.3 事件主动触发

使用 .trigger() 或 .triggerHandler() 主动触发事件。

示例：

$('#btn').on('click', function() {
  alert('被触发了！');
});

// 主动触发
$('#btn').trigger('click'); // 或简写：$('#btn').click();

⚠️ triggerHandler() 不会冒泡，也不触发浏览器默认行为。

8.4 命名空间（Namespaces）

为事件添加命名空间，便于批量管理。

示例：

$('#box')
  .on('click.pluginA', function() { console.log('A'); })
  .on('click.pluginB', function() { console.log('B'); });

// 只移除 pluginA 的 click
$('#box').off('click.pluginA');

九、事件扩展用法

9.1 `hover()` 方法

hover(handlerIn, handlerOut) 是 mouseenter 和 mouseleave 的简写。

示例：

$('#box').hover(
  function() { $(this).css('background', 'yellow'); }, // 进入
  function() { $(this).css('background', 'red'); }    // 离开
);

等价于：

$('#box').on('mouseenter', ...).on('mouseleave', ...);

9.2 `focusin()` 与 `focusout()`

与 focus/blur 不同，这两个事件支持冒泡，可用于事件委托。

示例：

<form>
  <input type="text" name="a">
  <input type="text" name="b">
</form>

<script>
$('form').on('focusin', 'input', function() {
  console.log('聚焦到:', this.name);
});
</script>

❌ focus 事件无法委托，因为不冒泡。

9.3 `one()` 方法

绑定只执行一次的事件。

示例：

$('#btn').one('click', function() {
  alert('只执行一次！');
  // 第二次点击无效
});

十、安装与部署 jQuery

步骤 1：引入 jQuery

方式一：CDN（推荐开发测试）

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

方式二：本地安装（生产环境推荐）

下载 jQuery：
- 官网：https://jquery.com/download/
- 选择 compressed, production 版本（如 jquery-3.6.0.min.js）
将文件放入项目目录，如 /js/jquery-3.6.0.min.js
在 HTML 中引入：

<script src="/js/jquery-3.6.0.min.js"></script>

步骤 2：验证安装

<script>
  if (typeof jQuery !== 'undefined') {
    console.log('jQuery 版本：' + $.fn.jquery);
  } else {
    console.error('jQuery 未加载！');
  }
</script>

✅ 建议将 jQuery 放在 <body> 底部或使用 defer 属性，避免阻塞页面渲染。

本章小结

知识点	核心要点
事件基础	使用 `.on()` 统一绑定
页面载入	`$(function(){})` 确保 DOM 就绪
鼠标/键盘/表单/滚动事件	对应用户交互行为
Event 对象	获取坐标、键值、控制冒泡与默认行为
高级用法	事件委托、命名空间、主动触发
扩展方法	`hover()`, `focusin()`, `one()` 等简化开发
部署	CDN 或本地引入，验证加载成功