本文已参与「新人创作礼」活动，一起开启掘金创作之路。

事件

事件是编程语言中的术语，它是用来描述程序的行为或状态的，一旦行为或状态发生改变，便立即调用一个函数。

事件监听

结合 DOM 使用事件时，需要为 DOM 对象添加事件监听，等待事件发生（触发）时，便立即调用一个函数。

addEventListener 是 DOM 对象专门用来添加事件监听的方法，它的两个参数分别为【事件类型】和【事件回调】。

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

需求：点击了按钮，改变文字颜色

事件监听三要素

事件源按钮

事件类型鼠标点击鼠标移入鼠标移除键盘事件等 click 字符串

事件处理程序

使用事件监听

获取元素事件源

设置事件类型

事件处理程序

//1.  获取元素 事件源
const input = document.querySelector('input');
//2.设置事件类型 keyup(键盘弹起时)
  input.addEventListener('keyup',function(){
  //3.设置事件处理程序，当事件发生时（在这里就是键盘弹起)，在控制台打印aaa
    console.log('aaa');  
  })

事件类型

鼠标事件

click: 鼠标点击 mouseenter:鼠标经过 mouseleave:鼠标离开

焦点事件

focus : 获得焦点

blur : 失去焦点

键盘事件

keydown: 键盘按下触发 keyup: 键盘弹起触发

文本事件

input:用户输入事件

上述是比较常用的，还有很多，遇见查文档就ok

事件对象

任意事件类型被触发时与事件相关的信息会被以对象的形式记录下来，我们称这个对象为事件对象。

获取事件对象

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

// 语法    这里e就是事件对象，一般命名为event、ev、e
元素.addEventListener('click', function (e) {
      console.log(e)
})

事件对象常用属性

事件对象是一个对象，其中包含了很多属性，有些使我们很常用的

获取当前的事件类型:type

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

clientX/clientY

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

offsetX/offsetY

用户按下的键盘键的值

key

trim方法

trim()去除字符串左右空格,对字符串中间空格无影响

// trim() 去除字符串左右空格,对原字符串没有影响
    // str.trim()
    const str = '   a dmin   ';
    console.log(str.trim());
  console.log(str.trim().length);// 6

环境对象

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

// 1 普通函数 
//每个函数里面都有this 环境对象 
//普通函数里面this指向的是window
function fn() {
      console.log(this);
    }
    fn();   //其实就是 window.fn()
  // 2 事件处理函数
  const btn = document.querySelector('button');
    // 在事件处理函数中，this一般指向事件源
    btn.addEventListener('click', function () {
      console.log(this); //这里this指的是  btn 对象
      this.style.color = 'red' ;//相当于  btn.style.color = 'red';
    })
// this指向： 谁调用我，我就指向谁

回调函数

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

    function fn() {
    console.log('我是回调函数...');
  }
  // 1 调用定时器
  setInterval(fn, 1000);
    
   //2  调用定时器，匿名函数做为参数
  setInterval(function () {
    console.log('我是回调函数...');
  }, 1000);

fn 函数做为参数传给了 setInterval ，这便是回调函数的实际应用了

结论：

回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见

Js-WebApi-事件与事件监听

事件

事件