JavaScript WebAPIs 第二章

Web APIs

DOM - 事件基础

事件

• 事件监听

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

2. 什么是事件监听？

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

3. 语法？

   元素.addEventListener( ’ 事件 ’ ，要执行的函数)

4. 事件监听三要素？

   事件源 事件 事件调用的函数

//1.获取元素
let btn = document.querySelector('button');
//2.事件监听(注册事件)
btn.addEventListener('click',function(){
	alert('被点击了');
})
-------------------------------------------
注意：
1.事件类型要加'引号'
2.函数是点击之后再去执行，'每次点击都会执行一次'

事件类型

1. 鼠标事件

   click - 单击事件 mouseenter - 鼠标经过 mouseleave - 鼠标离开

2. 焦点事件

   focus - 获得焦点 blur - 失去焦点

3. 键盘事件

   keydown - 键盘按下时触发 keyup - 键盘抬起触发

4. 文本事件

   input - 用户输入事件

高阶函数

匿名函数：

• 函数表达式：

//函数表达式与普通函数本质是一样的
let counter = function(x,y){
    return x + y
}
//调用函数
let result = counter(5,10)
console.log(result)

​ 函数表达式必须要先声明再调用

​ 函数也是一个值，也是一个数据，依然可以赋值给变量

• 自执行函数：

(function(){
    console.log('我立刻执行')
})()

//上一句没有;时，在(function)前写一个分号

• 回调函数：

  给其他函数当参数的函数，称为回调函数

环境对象

• 变量 this

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

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

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

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

$$事件处理函数中的this指向的是事件源$$