5. 事件处理

这是什么：事件（Event） = 用户的一次动作，比如点击、输入、提交，网页靠它才能和用户「互动」。

为什么用：原生 JavaScript 绑事件要写 addEventListener，还得自己处理冒泡和默认行为。jQuery 把这些封装成 .click()、.on() 这样的短方法，写法统一也好记。

如何用：本章从鼠标、键盘、表单事件讲到 .on() 绑定和事件委托，先用 .hover() 做一次鼠标移入变色的效果。

5.1 常用鼠标事件

推荐：处理鼠标进入/离开时，优先用 .mouseenter()/.mouseleave()，避免 mouseover/mouseout 冒泡带来的意外问题。

示例：hover 效果

<div id="box" style="width: 200px; height: 100px; background: #ddd;">
  把鼠标移到我这里
</div>

<script>
  $(function () {
    $('#box').hover(
      function () {
        $(this).css('background', '#4CAF50'); // 鼠标进入
      },
      function () {
        $(this).css('background', '#ddd');   // 鼠标离开
      }
    );
  });
</script>

$(this) 表示当前触发事件的元素，是 jQuery 对象。

5.2 键盘事件

示例：实时统计输入字数

<textarea id="input" rows="3" cols="40" placeholder="请输入内容..."></textarea>
<p>已输入：<span id="count">0</span> 个字</p>

<script>
  $(function () {
    $('#input').keyup(function () {
      const len = $(this).val().length;
      $('#count').text(len);
    });
  });
</script>

5.3 表单事件

示例：表单提交拦截

<form id="loginForm">
  <input type="text" id="username" placeholder="用户名" />
  <button type="submit">登录</button>
</form>
<p id="tip"></p>

<script>
  $(function () {
    $('#loginForm').submit(function (e) {
      e.preventDefault(); // 阻止表单默认提交行为
      const name = $('#username').val().trim();
      if (name === '') {
        $('#tip').text('用户名不能为空！').css('color', 'red');
      } else {
        $('#tip').text('提交成功！').css('color', 'green');
        // 这里可以做 AJAX 提交
      }
    });
  });
</script>

e.preventDefault() 用来阻止元素的默认行为（比如链接跳转、表单提交）。

5.4 事件绑定：on() / off()（推荐方式）

在 jQuery 早期，用 .click()、.bind() 等方法绑定事件。现在 推荐统一使用 .on() 方法，它功能更强大，且支持事件委托和动态元素绑定。

绑定单个事件

// 旧写法
$('#btn').click(function () {
  alert('点击了');
});

// 推荐写法（on）
$('#btn').on('click', function () {
  alert('点击了');
});

绑定多个事件

$('#input').on({
  focus: function () {
    $(this).css('border', '2px solid blue');
  },
  blur: function () {
    $(this).css('border', '1px solid #ccc');
  },
  keyup: function () {
    console.log('输入中：' + $(this).val());
  }
});

解除事件绑定：off()

// 移除所有 click 事件
$('#btn').off('click');

// 移除所有事件
$('#btn').off();

5.5 事件委托（处理动态添加的元素）

如果元素是 后续动态添加 的（比如用 append() 新增的按钮），直接用 .on() 绑定是无法生效的。

这时候就需要用 事件委托：把事件绑定到它的父元素（或祖先元素），当事件冒泡到父元素时，再判断是不是目标子元素。

语法：

$(parent).on('event', 'selector', function () { ... });

示例：为动态添加的 li 绑定点击事件

<ul id="list">
  <li>列表项 1</li>
  <li>列表项 2</li>
</ul>
<button id="add">添加一项</button>

<script>
  $(function () {
    // 事件委托：把 click 事件绑定到 #list，由 li 触发
    $('#list').on('click', 'li', function () {
      alert('你点击了：' + $(this).text());
    });

    // 动态添加 li
    $('#add').click(function () {
      $('#list').append('<li>新列表项</li>');
    });
  });
</script>

为什么用事件委托？

• 可以给未来添加的元素自动绑定事件
• 减少事件绑定数量（性能优化），尤其是列表项很多的时候

5.6 一次性事件：one()

如果希望某个事件只触发一次，可以用 .one()：

$('#btn').one('click', function () {
  alert('这个弹窗只会出现一次！');
});

5.7 事件对象 event

在事件处理函数中，可以接收一个 event 参数，里面包含了事件的相关信息。

$('#box').click(function (e) {
  console.log('事件类型：', e.type);        // "click"
  console.log('鼠标坐标：', e.pageX, e.pageY);
  console.log('触发元素：', e.target);
  e.preventDefault(); // 阻止默认行为
  e.stopPropagation(); // 阻止事件冒泡
});

常用属性/方法：

• e.type：事件类型
• e.target：实际触发事件的元素
• e.pageX / e.pageY：鼠标相对于页面的坐标
• e.preventDefault()：阻止默认行为
• e.stopPropagation()：阻止事件冒泡

5.8 小结

本章重点：

• 掌握常用鼠标、键盘、表单事件
• 推荐使用 .on() 统一绑定事件，.off() 解除绑定
• 事件委托是处理动态元素的关键技巧（$(parent).on(event, selector, fn)）
• .one() 用于一次性事件
• 了解 event 对象，能处理默认行为和冒泡

下一章，我们将学习 jQuery 的 效果与动画，让页面动起来。