从 jQuery 到原生 JS：DOM 操作与事件委托
从 jQuery 到原生 JS：DOM 操作与事件委托
项目准备去掉 jQuery，把常用写法对照原生 API 整理了一遍，发现现在的原生接口已经很好用了。
查询与操作
// jQuery: $('#list li')
document.querySelectorAll('#list li') // 静态 NodeList
document.getElementById('list') // 单个，性能最好
// 内容与属性
el.textContent = 'hello' // 代替 .text()，不解析 HTML
el.classList.add('active') // class 操作
el.dataset.id // 读取 data-id 属性
el.setAttribute('href', '/x')
创建和插入节点：
const li = document.createElement('li')
li.textContent = '新项目'
list.appendChild(li)
list.remove() // 现代浏览器可直接删除自己
事件流：捕获与冒泡
DOM 事件传播分三个阶段：捕获阶段（document → 目标）→ 目标阶段 → 冒泡阶段（目标 → document）。
addEventListener 第三个参数为 true 时在捕获阶段触发，默认 false 在冒泡阶段。
事件委托
不给每个子元素绑事件，而是把监听器绑在父元素上，靠冒泡统一处理：
list.addEventListener('click', (e) => {
const item = e.target.closest('li')
if (!item || !list.contains(item)) return
console.log('点击了：', item.dataset.id)
})
事件委托的好处：
- 动态添加的子元素无需重新绑定
- 大量列表时只绑一个监听器，省内存
阻止默认行为用 e.preventDefault()，停止冒泡用 e.stopPropagation()——但委托场景下不要乱停冒泡，否则父级的其他监听也收不到了。
看到这里了？如果这篇文章帮到过你
请我喝瓶可乐就好 🥤
评论0 条
还没有评论，来抢沙发～