跳到主要内容

jQuery 的 DOM 与事件处理模式

· 阅读需 2 分钟
一介布衣
一介布衣
全栈开发者 / 技术写作者

如果把 2013 年前端开发最有代表性的技术拿出来，jQuery 基本很难绕开。那时候很多页面交互、表单逻辑、弹窗效果，几乎都建立在 jQuery 之上。

它当年最重要的价值​

在今天看，jQuery 也许已经不是主角。但放回 2013 年，它真正解决的是浏览器兼容和 DOM 操作复杂度的问题。

开发者最直接感受到的好处就是：

  • 选元素更容易
  • 绑事件更统一
  • 改样式和改内容更顺手

一条最常见的页面交互链路​

$('#submitBtn').on('click', function () {
  var keyword = $('#keyword').val();

  if (!keyword) {
    $('.tip').text('请输入关键词').show();
    return;
  }

  $('#result').text('正在查询：' + keyword);
});

这段代码放在 2013 年就是非常典型的前端页面逻辑：选 DOM、读值、校验、更新界面。

事件委托为什么很关键​

当页面上的节点是动态插入时，直接绑事件经常会失效。这也是很多人当时开始理解事件委托价值的入口。

$(document).on('click', '.remove-item', function () {
  $(this).closest('.item').remove();
});

这个模式直到今天都仍然值得理解，因为它背后对应的是更底层的事件传播机制。

从今天回头看，它还留下了什么经验​

jQuery 最值得带走的，不只是 API 用法，而是那种“先把页面交互拆成可理解的小动作”的习惯。比如：

  • 先选对元素
  • 再绑定清晰事件
  • 最后更新明确区域

这种分层思路在今天的组件化框架里依然有价值，只是写法变了，本质没有变。

什么时候它会开始变乱​

当年的页面一旦复杂起来，也很容易出现这些问题：

  • 同一个元素被多处重复绑定事件
  • DOM 更新逻辑散落在不同文件
  • 选择器过深，稍微改结构就失效

这也是为什么后来大家会继续追求更强的组件化和状态管理。但在那个阶段，jQuery 仍然是很多前端工程经验的出发点。

小结​

2013 年前端开发的很多基础能力，其实都是在 jQuery 的时代被广泛训练起来的。哪怕今天已经不主用它，回头看这些 DOM 和事件处理模式，仍然能帮我们更清楚地理解前端的基本交互逻辑。