七、WEB APIs（二）

1. 事件监听（绑定）

什么是事件？

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

什么是事件监听？

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

1.1 事件监听

语法：

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

事件监听三要素：

1.事件源：那个dom元素被事件触发了，要获取dom元素。（被谁触发了）

2.事件类型：用什么方式触发，比如鼠标单击click，鼠标经过mouseover等。（用什么方式触发，点击还是鼠标经过等）

3.事件调用的函数：要做什么事。

PS:1.事件类型要加引号

2. 函数是点击之后再去执行，每次点击都会执行一次。

        //点击了按钮，弹出一个对话框//1. 事件源 按钮const btn = document.querySelector('button');//2. 事件类型 点击鼠标btn.addEventListener('click',function(){//3. 事件处理程序 弹出对话框alert('点击了按钮');})

1.2 事件监听版本

1. DOM L0

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

        const btn = document.querySelector('button');btn.onclick = function(){alert('点击了');}

2. DOM L2

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

3. 区别：

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

        const btn = document.querySelector('button');btn.onclick = function(){alert('点击了');}btn.onclick = function(){alert('点击了11');}

2. 事件类型

鼠标事件： 鼠标触发：click鼠标点击、mouseenter鼠标经过、mouseleave：鼠标离开

焦点事件： 表单获得光标：focus：获得焦点、blur：失去焦点

键盘事件： 键盘触发：Keydown：键盘按下触发、Keyup：键盘抬起触发

文本事件： 表单输入触发：input用户输入事件

鼠标事件：

        const div = document.querySelector('div');//鼠标经过div.addEventListener('mouseenter', function(){console.log('鼠标进入');});//鼠标离开div.addEventListener('mouseleave', function(){console.log('鼠标离开');});

焦点事件：

    <input type="text"><script>const input = document.querySelector('input');input.addEventListener('facus', function(){console.log("有焦点触发");});input.addEventListener('blur', function(){console.log("失去焦点触发");});</script>

键盘事件：

    <input type="text"><script>const input = document.querySelector('input');input.addEventListener('keydown', function(){console.log("键盘按下了");});input.addEventListener('keyup', function(){console.log("键盘抬起了");});</script>

用户输入文本事件：

        const input = document.querySelector('input');input.addEventListener('input', function(){console.log(input.value);//得到用户输入得内容});

3. 事件对象

3.1 获取事件对象

事件对象是什么？

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

语法：如何获取

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

2. 一般命名为event、ev、e

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