Web APIs之DOM事件基础

事件监听（绑定）
事件类型
事件对象
环境对象
回调函数

一、事件监听（绑定）

*事件监听
*拓展阅读-事件监听版本

1.事件监听

目标：能够给DOM元素添加事件监听
（1）什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
比如：单击按钮
（2）什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。
比如：鼠标经过显示下拉菜单；点击可以播放轮播图等

语法：

 元素对象.addEventListener('事件类型',要执行的函数)

事件监听三要素：
事件源：（谁被触发了）那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等
事件处理程序：要做什么事

<button>按钮</button>
<script>
    const btn = document.querySelector('button')
    btn.addEventListener('click',function(){
        alert('点击了~')
    })
</script>

2.事件监听版本

（1）DOM L0

 事件源.on事件 = function(){}

（2）DOM L2

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

（3）区别
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

const btn = document.querySelector('button')
btn.onclick = function(){
    alert(11)//被覆盖
}
btn.onclick = function(){
    alert(22)//弹出
}


const btn = document.querySelector('button')
btn.addEventListener('click',function(){
    alert(11)
})
btn.addEventListener('click',function(){
    alert(22)
})

二、事件类型

*鼠标事件 鼠标触发 click 鼠标点击 mouseenter 鼠标经过 mouseleave 鼠标离开
*焦点事件 表单获得光标 focus 获得焦点 blur 失去焦点
*键盘事件 键盘触发 keydown 键盘按下触发 keyup 键盘抬起触发
*文本事件 表单输入触发 input 用户输入事件

<div></div>
<script>
    const div = document.querySelector('div')
    div.addEventListener('mouseenter',function(){
        alert('我来了')
    })
    div.addEventListener('mouseleave',function(){
        alert('我走了')
    })
</script>

三、事件对象

*获取事件对象
*事件对象常用属性

1.获取事件对象

目标：能说出什么是事件对象
（1）事件对象是什么？
也是个对象，这个对象里面有事件触发时相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
（2）使用场景
可以判断用户按下哪个键？比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素，从而做相应的操作

语法：如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

元素.addEventListener('click',function(e){})

例：

<button>点击</button>
<script>
    const btn = document.querySelector('button')
    btn.addEventListener('click',function(e){
        console.log(e)
    })
</script>

2.事件对象常用属性

部分：
type:获取当前的事件类型
clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
key:用户按下的键盘键的值,现在不提倡使用keyCode

  <input type="text">
  <script>
      const input = document.querySelector('input')
      input.addEventListener('keyup',function(e){
          // console.log(e);
          if(e.key === 'Enter'){
              console.log('我按下了回车键')
          }
      })
  </script>

四、环境对象

1.目标：能够分析判断函数运行在不同环境中this所指代的对象

2.环境对象：指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境

3.作用：弄清楚this指向，可以让代码更简洁
*函数的调用方式不同，this指代的对象也不同
*【谁调用，this就是谁】是判断this指向的粗略规则
*直接调用函数，其实相当于是window.函数，所以this指代window

五、回调函数

1.目标：能够说出什么是回调函数
(1)把函数当做另外一个函数的参数传递，这个函数就叫回调函数
（2）回调函数本质还是函数，只不过把它当成参数使用
（3）使用匿名函数做为回调函数比较常见
2.简称：如果将函数A作为参数传递给函数B时，我们称函数A为回调函数
3.常用场景：

function fn(){
     console.log('我是回调函数...')
 }
 //fn传递给了setInterval,fn就是回调函数
 setInterval(fn,1000)

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