javascript-Web APls （二）

事件监听（绑定）

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

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

事件监听：

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

 

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

 

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

事件监听三要素：

 

 

事件源 (谁被触发了)

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

事件处理程序 （要做什么事情）

 

<button>按钮</button>
<script>
    //老规矩获取
     const btn = document.querySelector('.btn')

    //给按钮添加点击事件
    btn.addEventListener('click',function(){
                alert('点击了~')
})
</script>

注意：

1. 事件类型要加引号

 

2. 函数是点击之后再去执行，每

次点击都会执行一次

 

 事件监听版本

 DOM L0

 

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

 

 DOM L2

 

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

 

  区别：

 

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

 

事件类型

鼠标事件：鼠标触发  

click 鼠标点击

mouseenter 鼠标经过

mouseleave 鼠标离开

焦点事件：表单获得光标

focus 获得焦点

blur 失去焦点

键盘事件：键盘触发

keydown 键盘按下触发

keyup 键盘抬起触发

文本事件：表单输入触发

input 用户输入事件

事件对象

1.获取事件对象

事件对象是什么

 

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

 

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

 

元素.addEventListener('click',function(e){ })   //事件对象 ： e

部分常用属性

  type

  获取当前的事件类型

  clientX/clientY

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

  offsetX/offsetY

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

  key

  用户按下的键盘键的值

  现在不提倡使用keyCode

环境对象

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

 

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

 

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

 

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

 

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

 

回调函数

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

 

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

使用匿名函数做为回调函数比较常见

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

setInterval(fn,1000)

//还有一个

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