web APIs-day02

1.事件监听

• 什么是事件？

事件是在编程时系统内发生的动作或者发生的事情

比如用户在网页上单击一个按钮

• 什么是事件监听？

就是让程序检测是否有事件产生，一旦事件触发，就立即调用一个函数做出响应，也称之为绑定事件或者事件

比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等

• 语法：

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

• 事件监听三要素：

• 事件源：哪个dom元素事件触发了，要获取dom元素

• 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover

• 事件调用的函数：要做什么事

2.事件类型

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

3.事件对象

3.1获取事件对象

• 事件对象是什么

• 也是一个对象，这个对象有事件触发时的相关信息

• 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

• 使用场景

• 可以判断用户按下哪个键，比如按下回车键可以发布新闻

• 可以判断鼠标点击了哪个元素，从而做相应的操作

• 语法：

• 在事件绑定的回调函数的第一个参数就是事件对象

• 一般命名为event、ev、e

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

})

• 部分常用属性

• type

• 获取当前事件的事件类型

• clientX/clientY

• 获取光标相对于浏览器可见窗口左上角的位置

• offsetX/offserY

• 获取光标相对于当前DOM元素左上角的位置

• key

• 用户按下的键盘键的值

4.环境对象

指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

• 作用：弄清楚this的指向，可以让我们代码更简洁

• 函数的调用方式不同，this指代的对象也不同

• 谁调用，this就是谁，是判断this指向的粗略规则

• 直接调用函数，其实相当于是window.函数，所以this指代window

5.回调函数

如果将函数A 作为参数传递给函数B时，我们称函数A为回调函数

简单理解：当一个函数当作参数来传递给另一个函数的时候，这个函数就是回调函数

• 常见使用场景：

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

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