← 返回目录

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

事件绑定原生 JS 要写 addEventListener，jQuery 一行搞定。但更重要的是 on 方法——它支持事件委托，意思是：你给父元素绑一次，以后动态加进来的子元素也能自动触发事件，不用重新绑。这对动态列表（商品、消息）来说太重要了。

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

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

13.2 知识点讲解

① 三种事件绑定方式

// 方式一：简写（最常用，和原生对应）
$("#btn").click(function () { ... }); // 点击事件
$("input").on("input", function () {}); // 输入事件
$(window).scroll(function () {}); // 滚动事件

// 方式二：on 统一绑定（推荐！功能更全）
$(".box").on("click", function () { ... });

// 方式三：off 解绑
$(".btn").off("click"); // 把这个元素的点击事件解绑

② 事件委托：on 的核心优势

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

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

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

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

③ 链式调用：一串点下去

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

// 链式：选完元素，一串方法连写
$(".box")
  .text("改文字") // 改完还是 jQuery 对象，继续点
  .css("height", "150px") // 改高度，继续点
  .addClass("show") // 加类，继续点
  .click(function () { // 绑事件，继续点
    alert("点了盒子");
  });

// end：回退到上一级选择
$(".list")
  .find("li") // 选中所有 li
  .eq(0) // 选中第一个 li
  .text("第一个") // 改文字
  .end() // 回退到 $(".list").find("li")（所有 li）——jQuery 方法要加括号
  .css("border", "1px solid #000"); // 给所有 li 加边框

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

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

可能在什么地方用：

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

常见的问题：

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

解决思路：

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

13.3 课后作业（融入本节）