API第二天

1.事件监听（绑定）

1.1 事件监听

语法：

 元素对象.addEventListener('时间类型',要进行执行的函数)

事件监听三要素：
Ø 事件源： 那个dom元素被事件触发了，要获取dom元素
Ø 事件类型： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
Ø 事件调用的函数： 要做什么事

总结

1. 什么是事件监听？
   Ø 就是让程序检测是否有事件产生，一旦有事件触发，
   就立即调用一个函数做出响应，也称为 注册事件
2. 事件监听三要素是什么？
   Ø 事件源 (谁被触发了)
   Ø 事件类型 (用什么方式触发，点击还是鼠标经过等)
   Ø 事件处理程序 （要做什么事情

1.2 事件监听版本

DOM L0
事件源.on事件 = function() { }
DOM L2
事件源.addEventListener(事件， 事件处理函数)
区别：
on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性，推荐使用

2.事件类型

3.事件对象

3.1 获取事件对象

语法：如何获取

btn.addEventListener('click',function(e){
            console.log(e);
        })

这个里面的e就是事件对象
Ø 在事件绑定的回调函数的第一个参数就是事件对象
Ø 一般命名为event、ev、e

总结

1. 事件对象是什么？
   Ø 也是个对象，这个对象里有事件触发时的相关信息
2. 事件对象在哪里？
   Ø 在事件绑定的回调函数的第一个参数就是事件对象

3.2 部分常用属性

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

4…环境对象

环境对象：指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
Ø 函数的调用方式不同，this 指代的对象也不同
Ø 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
Ø 直接调用函数，其实相当于是 window.函数，所以 this 指代 window

总结

1. 环境对象this是什么？
   Ø 它代表着当前函数运行时所处的环境
2. 判断 this 指向的粗略规则是什么？
   Ø 【谁调用， this 就是谁】

5.回调函数

如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
常见的使用场景

   function fn(){}
   setInterval(fn,1000)

        box.addEventLisetrner('click',function(){})

总结

1. 回调函数
   Ø 把函数当做另外一个函数的参数传递，这个函数就叫回调函数
   Ø 回调函数本质还是函数，只不过把它当成参数使用
   Ø 使用匿名函数做为回调函数比较常见