13. jQuery 事件绑定与链式调用

jQuery 事件绑定和链式调用，一行代码绑多个事件。

核心三个：
1. .click(fn) / .on("click", fn)——绑事件
2. .trigger("click")——手动触发
3. .stop() / .animate()——动画

坑：.on() 支持事件委托、链式调用 return this、.off() 解绑。

另外 链式调用：jQuery 大部分方法执行完返回的还是 jQuery 对象，所以你可以像糖葫芦一样一串点下去，不用每次都重新选元素。

13.1 互动演示（事件委托 + 链式调用）

13.2 知识点讲解

1. 三种事件绑定方式

// 方式一：简写（最常用，和原生对应）
// 点击事件
$("#btn").click(function () { console.log("点了按钮"); });
// 输入事件
$("input").on("input", function () {});
// 滚动事件
$(window).scroll(function () {});
// 方式二：on 统一绑定（推荐！功能更全）
// 方式三：off 解绑
$(".box").on("click", function () { console.log("点了盒子"); });
// 把这个元素的点击事件解绑
$(".btn").off("click");

2. 事件委托：on 的核心优势

假设你有一个商品列表，用户点"添加"按钮动态往里加商品。如果你直接给每个商品绑点击事件——那新加的商品就没绑事件，点了没反应，你得每次加完再重新绑一遍。事件委托就是：把事件绑在父元素上，让父元素"帮"子元素监听。新加的子元素自动就有事件了，不用重新绑。

// 事件委托写法：
// 给 ul 绑点击，第二个参数 "li" 表示"只有点击 li 才触发"
$("ul").on("click", "li", function () {
  // this 就是被点的那个 li
  console.log($(this).text);
});

// 对比：直接绑 li 只能管现有的
// 新加的 li 不生效！
$("li").click(function () {});

如果你直接给 $("li") 绑点击，动态加进来的新 li 点了没反应——因为绑定的时候新 li 还不存在。用 $("ul").on("click", "li", fn) 委托，父元素一直在，新子元素自动冒泡上来触发。

3. 链式调用：一串点下去

jQuery 大部分方法执行完，返回的还是 jQuery 对象本身，所以你可以一直点下去，不用每一步都重新选元素：

// 链式：选完元素，一串方法连写
$(".box")
  // 改完还是 jQuery 对象，继续点
  .text("改文字")
  // 改高度，继续点
  .css("height", "150px")
  // 加类，继续点
  .addClass("show")
  // 绑事件，继续点
  .click(function () {
    alert("点了盒子");
  // end：回退到上一级选择
  });
$(".list")
  // 选中所有 li
  .find("li")
  // 选中第一个 li
  .eq(0)
  // 改文字
  .text("第一个")
  // 回退到 $(".list").find("li")（所有 l
  .end()
  // 给所有 li 加边框
  .css("border", "1px solid #000");

链式调用的原理就是每个方法执行完 return this——自己返回自己，所以能一直点下去。

4. 实战：用在哪 / 常见坑 / 怎么解决

可能在什么地方用：

1. 动态列表（商品、消息、待办）的点击/删除事件——必须用事件委托
2. 一个元素要连续改文字、样式、加类、绑事件——用链式一行搞定
3. 按钮点击后解绑事件防止重复触发。

常见的问题：

1. 动态添加的元素点了没反应——忘了用事件委托
2. this 指向搞混——在事件回调里 this 是被触发的原生 DOM，要用 $(this) 包一下才能调 jQuery 方法
3. off 解绑了所有事件，不是只解绑某一个。

解决思路：

1. 动态列表一律用 父元素.on("click", "子元素", fn) 委托
2. 事件回调里要用 jQuery 方法就写 $(this)
3. 解绑时指定事件名。

13.3 课后作业（融入本节）

本页重点