JS API事件监听（绑定）

事件监听

语法

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

事件监听三要素

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

2. 事件类型：用说明方式触发，比如鼠标单击click、鼠标经过mouseover等

3. 事件调用的函数：要做说明事

例

  const btn = document.querySelector('button');btn.addEventListener('click', function () {alert('看看我执行了吗');});

注意

1. 事件类型要加引号

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

事件类型

获取事件对象

目标：能说出什么是事件对象

• 事件对象是什么

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

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

• 使用场景

  1. 可以判断用户按下哪个键，比如按下回车键可以发布新闻

  2. 可以判断鼠标点击了哪个元素，从而做相应的操作

语法

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

• 一般命名为event、ev、e

元素.addEventListenner('click',function(e)) {console.log(e);
}

其中e就是事件对象

环境对象

目标：能够分析判断函数在不同环境中this所指代的对象

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

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

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

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

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

回调函数

目标：能够说出来什么是回调函数

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

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

• 常见的使用场景：