​

一.事件监听:

事件监听就是在网页上操作点击触发等就调用一个函数做出响应,也称为注册事件

事件监听三要素:

• 事件源(谁被触发了)

• 事件类型(用什么方式触发,点击还是鼠标经过)

• 事件调用函数:(要做什么事)

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

二.事件类型:

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

三.事件对象:

事件对象也是个对象，这个对象里有事件触发时的相关信息 , 在事件处理函数的第一个参数就是事件对像

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

})

部分常用属性:

• type 获取当前的事件类型
• clientX/clientY : 获取光标相对于浏览器可见窗口左上角的位置
• pageX/pageY : 获取光标相对于当前DOM元素左上角的位置
• key 用户按下的键盘键的值

四.环境对象:

环境对象就是函数内部特殊的变量this,代表当前函数运行时所处的环境

作用:函数的调用方式不同,this指代的对象不同

谁调用谁,this就是谁

直接调用函数,其实相当于是window.函数,所有this指代window

五.回调函数:

如果将函数A做为参数传递给函数B时,我们成函数A为回调函数

回调函数就是当一个函数当做参数来传递给另一个函数的时候

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



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

回调函数本质还是函数，只不过把它当成参数使用

​