Web-API 事件的学习

 掌握事件绑定处理和事件对象，完成常见网页交

文章目录

• 事件监听
• 事件类型
• 事件对象

---

事件监听

以前写的代码都是自动执行的，我们希望一段代码在某个特定的时机才去执行，比如:

• 点击按钮可以弹出警示框

• 比如鼠标经过显示下拉菜单等等

---

事件监听三要素

• 事件源(谁被触发了)

• 事件类型 (什么情况下触发，点击还是鼠标经过等)

• 事件处理函数（要做什么事情）

1.回调函数

回调函数:当一个函数当做参数来传递给另外一个函数的时候，

这个函数就是回调函数（回头调用的函数），完成某一些特定任务。

代码如下（示例）：

<script>
  // 1. 定时器间隔函数，里面第一个参数又是函数，这个匿名函数就是回调函数
  setInterval(function () {
    console.log('我是回调函数')
  }, 1000)

  // 2. addEventListener 函数的第二个参数也是函数，这个匿名函数也是回调函数
  btn.addEventListener('click', function () {
    console.log('我是回调函数')
  })
</script>

2.DOM事件监听

1.事件源.on事件类型 = function() { }

代码如下（示例）：

btn.onclick = function () {
  alert('我是弹窗1')
}

2.事件源.addEventListener(事件类型，事件处理函数)

代码如下（示例）：

btn.addEventListener('click', function () {
  console.log('我是回调函数')
})

区别：

on 方式同名事件会被覆盖，addEventListener则不会，同时拥有事件更多特性，推荐使用;