如何利用javascript处理事件和回调?【教程】

6次阅读

javaScript中事件与回调本质相同:事件是异步信号,回调是响应函数;addEventListener需传函数引用而非调用结果;循环中注意闭包问题;promise需分层处理http状态与解析错误;setTimeout/setInterval中this需手动绑定;异步操作后dom更新须置于.then或await之后。

如何利用javascript处理事件和回调?【教程】

javascript 中事件和回调不是两个独立概念,而是同一机制的不同表现:事件是异步触发的信号,回调是响应这个信号的函数。直接绑定、传递或返回函数即可,不需要额外“转换”。

addEventListener 的回调必须是函数引用,不能带括号

常见错误是写成 element.addEventListener('click', handleClick())——这会立即执行 handleClick 并把它的返回值(通常是 undefined)当回调传入,导致点击无反应。

正确做法是传函数名本身(不加括号),或用箭头函数包裹:

  • element.addEventListener('click', handleClick)
  • element.addEventListener('click', () => handleClick(arg))(需传参时)
  • 避免在循环中用 for (let i = 0; i console.log(i) }——闭包问题会让所有按钮输出最后一个 i 值;改用 let 声明或 foreach 更安全

Promise.then 的回调接收 resolve 值,但不会自动传播错误

fetch 成功返回 Response 对象,但 response.json() 才真正解析 json;如果后端返回 500 状态码fetch 仍算“成功”,必须手动检查 response.ok

立即学习Java免费学习笔记(深入)”;

错误处理要分层:

  • .then(data => data.json()) 只处理解析逻辑,不捕获网络失败
  • .catch(err => console.Error(err)) 捕获网络异常、JSON 解析失败等,但不捕获 404500 这类 HTTP 错误
  • 需要显式判断:if (!response.ok) throw new Error(`${response.status} ${response.statusText}`)

setTimeout 和 setInterval 的回调没有 this 绑定

在对象方法中使用 setTimeout(this.handler, 100),回调执行时 this 指向 window(非严格模式)或 undefined(严格模式),不是原对象。

修复方式有三种:

  • 用箭头函数:setTimeout(() => this.handler(), 100)
  • bindsetTimeout(this.handler.bind(this), 100)
  • 提前缓存 thisconst self = this; setTimeout(function() { self.handler(); }, 100)

最易被忽略的是事件回调里的异步链:比如点击触发 API 调用,调用完成后再更新 DOM——很多人把 DOM 更新写在事件处理函数顶层,而不是放在 .thenasync/await 的后续位置,结果更新发生在请求完成前。

text=ZqhQzanResources