EVENT(上)

什么是事件

一个事件的组成
- 触发谁的事件: 事件源
- 触发什么事件: 事件类型
- 触发后做什么: 事件处理函数

var oDiv = document.querySelector('div')

oDiv.onclick = function () {}
/**
 * 触发谁的事件 ---> oDiv ---> 事件源就是 oDiv
 * 触发什么事件 ---> onclick ---> 事件类型就是 click
 * 触发后做什么 ---> function () {} ---> 这个事件的处理函数
*/

var oDiv = document.querySelector('div')

oDiv.onclick = function () {
	console.log('你点击了 div')
}

当我们点击 div 的时候, 就会执行事件处理函数内部的代码
每点击一次, 就会执行一次事件处理函数

常见的事件 (了解)

事件分类
- 浏览器事件
- 鼠标事件
- 键盘事件
- 表单事件
- 触摸事件

浏览器事件

load: 页面全部资源加载完毕
scroll: 浏览器滚动的时候触发
...

鼠标事件

click: 点击事件
dblclick: 双击事件
contextmenu: 右键事件
mousedown: 鼠标左键按下事件
mouseup: 鼠标左键抬起事件
mousemove: 鼠标移动
mouseover: 鼠标移入事件
mouseout: 鼠标移出事件
mouseenter: 鼠标移入事件
mouseleave: 鼠标移出事件
...

键盘事件

keyup: 键盘抬起事件
keydown: 键盘按下事件
keypress: 键盘按下在抬起事件
...

表单事件

onfocus: 输入框获取焦点
onblur: 输入框失去焦点
change: 表单内容改变事件
input: 表单内容输入事件
...

触摸事件

touchstart: 触摸开始事件
touchend: 触摸结束事件
touchmove: 触摸移动事件
...

事件对象

什么是事件对象
- 当触发一个事件以后, 对该事件的一些描述信息
- 比如: 点击的位置坐标是什么, 触发键盘事件时按的那个按钮
每一个事件都会有一个对象的对象来描述这些信息, 我们就把这个对象叫做 事件对象
浏览器给了我们一个 黑盒子, 叫做 window.event, 就是对事件信息的所有描述
- 比如点击事件, 我们可以通过 event 对象知道我们点击了那个位置

oDiv.onclick = function () {
	console.log(window.event.X轴坐标点信息)
	console.log(window.event.Y轴坐标点信息)
}

但这东西有兼容性问题, 在低版本IE里很好用, 但是在高版本IE和Chrome 里不好使了
所以我们需要换一个方式来获取, 就是在每一个事件处理函数的形参位置, 默认第一个就是 事件对象

oDiv.onclick = function (e) {
	console.log(e.X轴坐标点信息)
	console.log(e.Y轴坐标点信息)
}

综上所述, 我们以后在每一个事件里, 都采用兼容写法

oDiv.onclick = function (e) {
	e = e || window.event
	console.log(e.X轴坐标点信息)
	console.log(e.Y轴坐标点信息)
}

点击事件的光标点获取

我们点击事件的坐标点都不是一堆, 所以要有一个相对的坐标系
例如:
- 相对于事件源(就是我们点击的那个元素)
- 相对于页面
- 相对于浏览器窗口
因为这些都不一样, 所以我们获取的方式也不一样

相对于事件源

offsetX 和 offsetY
相对于我们点击的元素的边框内测开始计算

* {
	margin: 0;
	padding: 0;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.offsetX)
	console.log(e.offsetY)
}

相对于浏览器窗口你点击的坐标点

clientX 和 clientY
相对于浏览器窗口来计算的, 不管你页面滚动到什么情况, 都是根据窗口来计算坐标

* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.clientX)
	console.log(e.clientY)
}

相对于页面你点击的坐标点

pageX 和 pageY
是相对于整个页面的坐标点, 不管有没有滚动, 都是相对于页面拿到的坐标点

* {
	margin: 0;
	padding: 0;
}
body {
	width: 2000px;
	height: 2000px;
}
div {
	width: 300px;
	height: 300px;
	padding: 20px;
	border: 10px solid #333;
	margin: 20px 0 0 30px;
}

<div></div>

var oDiv = document.querySelector('div')

// 注册点击事件
oDiv.onclick = function (e) {
	// 事件对象兼容写法
	e = e || window.event

	console.log(e.pageX)
	console.log(e.pageY)
}

键盘事件

键盘事件中最主要做两件事
- 判断点击的是那个按键
- 有没有组合按键, 比如 ctrl + c; ctrl + v
我们先要明确, 不是所有的元素都可以绑定键盘事件
- 事件有一个关键的东西, 就是由谁触发的
- 通常 div 这种标签是无法触发键盘事件的, 键盘事件一般都只能给页面上选中的元素(表单元素) 和 document 来绑定键盘事件

document.onkeyup = function () {}
oInpput.onkeyup = function () {}

确定按键

键盘的每一个按键都有一个自己的编码
我们可以通过 事件对象.keyCode 或者 事件对象.which 来获取

document.onkeyup = function (e) {
	e = e || window.event

	var keyCode = e.keyCode || e.which

	console.log(keyCode)
}

组合按键

组合按键最主要的就是 alt / shift / ctrl
所以在点击某一按键的时候判断一下这三个键有没有按下, 有就是组合键, 没有就是没有组合
事件对象给我们提供三个属性
- altKey / shiftKey / ctrlKey
- 三个键按下时会得到 true, 否则为 false

document.onkeyup = function (e) {
	e = e || window.event
	keyCode = e.keyCode || e.which

	if (e.altKey && keyCode ===65) {
		console.log('按下组合键 alt 和 a')
	}
}

事件的绑定方式

我们现在给一个注册事件都是使用 onXXX 的方式
但是这种方式不是很好, 只能给一个元素注册一个事件, 如果写了第二个, 那么第一个会被覆盖

oDiv.onclick = function () {
	console.log('第一个事件')
}
oDiv.onclick = function () {
	console.log('第二个事件')
}

我们这种绑定方式, 只会执行第二个, 第一个就没了
如果想要两个都存在, 我们可以使用事件监听的方式去给元素绑定事件
使用 addEventListener 的方式添加
- 在 IE 中要使用 attachEvent

事件监听

addEventListener (非IE7 8 下使用)

语法: 元素.addEventListener('事件类型', 事件处理函数, 冒泡还是捕获)

oDiv.addEventListener('click', function () {
	console.log('我是第一个事件')
}, false)
oDiv.addEventListener('click', function () {
	console.log('我是第二个事件')
}, false)

点击 div 时, 两个函数都会执行, 并且会按照你注册的顺序执行
先打印 我是第一个事件, 然后打印 我是第二个事件
注意: 事件类型不要写 on, 点击事件就是 click, 不是 onclick

attachEvent (IE 7 8 下使用)

语法: 元素.attachEvent('事件类型', 事件处理函数)

oDiv.attachEvent('click', function () {
	console.log('我是第一个事件')
})
oDiv.attachEvent('click', function () {
	console.log('我是第二个事件')
})

点击 div 时, 两个函数都会执行, 并且会按照你注册的顺序倒叙执行
先打印 我是第二个事件, 然后打印 我是第一个事件
注意: 事件类型需要要写 on, 点击事件就是 onclick

两个方式的区别

注册事件的时候事件类型参数的书写
- addEventListener: 需要写 on
- attachEvent: 不需要写 on
参数个数
- addEventListener: 一般是三个常用参数
- attachEvent: 两个参数
执行顺序
- addEventListener: 顺序注册, 顺序执行
- attachEvent: 顺序注册, 倒叙执行
适用浏览器
- addEventListener: 非 IE 7 8 的浏览器
- attachEvent: IE 7 8浏览器

进制转换(了解)与保留小数(掌握)

十进制转换为其他进制

十进制数组.toString(其他进制的数)

var num = 100
num.toString(2) // 将 10 进制的 100, 转换为 2 进制的数, 得到了: '1100100'
num.toString(36) // 将 10 进制的 100, 转换为 36 进制的数, 得到了: '2s'

其他进制转换为十进制

var num = parseInt(数字, 将数字视为几进制的数字然后转换为10进制的数字)

var num = parseInt(100, 2)  // 将100视为2进制的数, 然后将其转换为十进制的数字, 得到了: 4
var num = parseInt(100, 16)  // 将100视为16进制的数, 然后将其转换为十进制的数字, 得到了: 256

保留小数 toFixed, 保留小数时四舍五入, 且返回的是字符串

var num = 100.123456789
var num1 = num.toFixed(2)   // 100.12
var num2 = num.toFixed(4)   // 100.1235

Date

Date 给我们提供了操作时间的一些方法, 是 JS 内置的一个对象

时间对象

时间对象的创建

语法: var timer = new Date()

不传参

默认返回当前时间

var timer = new Date()
console.log(timer)
// Fri Oct 07 2022 08:52:29 GMT+0800 (中国标准时间)

传参

可以获取到一个你传递进去的时间

var timer = new Date('2022-01-06 12:12:12')
console.log(timer)
// Thu Jan 06 2022 12:12:12 GMT+0800 (中国标准时间)

传递两个数字, 第一个为年, 第二个为月

var timer = new Date(2022, 00)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Sat Jan 01 2022 00:00:00 GMT+0800 (中国标准时间)

传递三个数字, 前两个不变, 第三个表示该月份的第几天, 从1到31

var timer = new Date(2022, 00, 31)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Mon Jan 31 2022 00:00:00 GMT+0800 (中国标准时间)

传递四个数字, 前三个不变, 第四个表示当天的几点, 0-23

var timer = new Date(2022, 00, 31, 23)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Mon Jan 31 2022 23:00:00 GMT+0800 (中国标准时间)

传递五个数字, 前四个不变, 第五个为该小时的多少分钟, 0-59

var timer = new Date(2022, 00, 31, 23, 59)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Mon Jan 31 2022 23:59:00 GMT+0800 (中国标准时间)

传递六个参数, 前五个不变, 第六个表示该分钟的多少秒, 0-59

var timer = new Date(2022, 00, 31, 23, 59, 59)  // 注意 月份从 0 开始计数, 0表示1月, 11表示12月
console.log(timer)
// Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)

传递字符串的形式

console.log(new Date('2019'))   // Tue Jan 01 2019 08:00:00 GMT+0800 (中国标准时间)

console.log(new Date('2019-02'))   // Fri Feb 01 2019 08:00:00 GMT+0800 (中国标准时间)

console.log(new Date('2019-02-28')) // Thu Feb 28 2019 08:00:00 GMT+0800 (中国标准时间)

console.log(new Date('2019-02-28 13:')) // Thu Feb 28 2019 13:00:00 GMT+0800 (中国标准时间)
 
console.log(new Date('2019-02-28 13:13:')) // Thu Feb 28 2019 13:13:00 GMT+0800 (中国标准时间)
 
console.log(new Date('2019-02-28 13:13:13')) // Thu Feb 28 2019 13:13:13 GMT+0800 (中国标准时间)

将日期对象格式化成指定内容

我们得到的时间字符串是: Thu Feb 28 2019 13:13:13 GMT+0800 (中国标准时间)
我们得到这个日期中是那年或者那天, 需要靠截取字符串的形式得到
但是现在 JS 为我们提供了一系列的方法来得到里面的指定内容

getFullYear

得到指定字符串中的那一年

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getFullYear()) // 2022

getMonth

得到指定字符串中的那一月, 月的计数从 0 开始

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMonth()) // 0

getDate

得到指定字符串中的那一日

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDate()) // 31

getHours

得到指定字符串的那小时

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getHours()) // 23

getMinutes

得到指定字符串中的那分钟

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getMinutes()) // 59

getSeconds

得到指定字符串中的那秒钟

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getSeconds()) // 59

getDay

获取当前日期是一周中的第几天(周日是0, 周六是6)

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getDay()) // 1

getTime

按照格林威治时间计算从1970 年 1 月 1 日 0 时 0 分 0 秒到现在(或指定日期)的毫秒数

var timer = new Date(2022, 00, 31, 23, 59, 59)
console.log(timer) // Mon Jan 31 2022 23:59:59 GMT+0800 (中国标准时间)
console.log(timer.getTime()) // 1554681622000

设置相关

setFullYear()

语法: 时间对象.setFullYear(年份信息)
作用: 修改该时间对象内的年份信息

var time = new Date()
timer.setFullYear(2008)
console.log(timer.getFullYear())

setMonth()

语法: 时间对象.setMonth(月份信息)
作用: 修改该时间对象内的月份信息

var time = new Date()
timer.setMonth(2)
console.log(timer.getMonth())

setDate()

语法: 时间对象.setDate(日期信息)
作用: 修改该时间对象内的日期信息

var time = new Date()
timer.setDate(4)
console.log(timer.getDate())

setHours()

语法: 时间对象.setHours(小时信息)
作用: 修改该时间对象内的小时信息

var time = new Date()
timer.setHours(12)
console.log(timer.getHours())

setMinutes()

语法: 时间对象.setMinutes(分钟信息)
作用: 修改该时间对象内的分钟信息

var time = new Date()
timer.setMinutes(45)
console.log(timer.getMinutes())

setSeconds()

语法: 时间对象.setSecond(秒钟信息)
作用: 修改该时间对象内的秒钟信息

var time = new Date()
timer.setSeconds(20)
console.log(timer.getSeconds())

setMilliseconds()

语法: 时间对象.setMilliseconds(毫秒信息)
作用: 修改该时间对象内的毫秒信息

var time = new Date()
timer.setMilliseconds(857)
console.log(timer.getMilliseconds())

setTime()

语法: 时间对象.setTime(毫秒信息)
作用: 使用时间戳信息直接定位时间对象

var time = new Date()
timer.setTime(1440004004531)
console.log(timer)

定时器

两种定时器的介绍和作用 ( setTimeout / setInterval )
- setInterval 计时器, 每间隔固定的时间执行一次语法: setInterval(函数, 数字) 函数: 每间隔多少时间执行的代码数字: 间隔时间, 单位是毫秒
- setTimeout 倒计时器, 在指定时间到达后, 执行一次
  - 语法: setTimeout(函数, 数字) 函数: 一段时间后执行的代码数字: 间隔时间, 单位是毫秒
定时器的返回值及意义
- 返回值不区分定时器种类, 用于表示你这个定时器是页面中的第几个定时器
- 作用: 用来关闭定时器
关闭定时器
- 不区分定时器种类, 只要给出正确的定时器返回值就可以关闭
- 语法:
  - clearTimeout(定时器返回值)
  - clearInterval(定时器返回值)

简单的代码异步执行机制

什么是非异步执行代码
- 按照从上到下的顺序, 从左到右的顺序, 依次执行每一行代码
- 上一行代码没有执行完毕, 不会执行下一行代码
什么是异步执行代码
- 当代码遇到异步任务的时候, 会把该代码放在异步队列内等待
- 所有的同步代码执行完毕后, 再开始执行异步队列内的代码
什么是异步任务
- 两种定时器都是异步任务
- 可以理解为, 限制性定时器外面的代码, 然后执行定时器里边的代码

数组去重案例

严格模式(了解)

JS 是一个相对不是很严谨的语言, 在开发的时候一些代码也不是很严格, 严格模式就是对开发的时候写的代码做了一些要求

如何开启严格模式

要开启严格模式, 直接在代码最开始的位置写上字符串 'use strict'

严格模式的规则

声明变量必须有 var 关键字
函数的形参不可以重复

字符串

创建字符串(了解)

字面量
构造函数创建

var str1 = 'hello'
var str2 = new String('hello')

ASCII 字符集(了解)

计算机只能存储二进制数据 0101010
我们的大写字母; 小写字母; 符号之类的内容也是由二进制数字组成的
或者说我们的字母符号这些东西写都有一个对应的编号, 然后计算机存储的时候是存储的这些编号,不过我们看到的时候, 是通过这些编号解析成我们看到的内容
所以我们计算机存储的字母符号之类的并不是存储了这个字母, 而是存储了这个字母对应的编号, 然后给我们看到的时候是通过这个编号找到了对应的字母给我们看

unicode 编码

ASCII 只有 128 个字符的编码结构, 这是因为他出现的比较早, 而且是美国发明的, 所以在早期这些内容完全足够
但是这个世界要存储的东西就不够, 比如我们的汉字, 所以就出现了 unicode 编码, 也叫(万国码, 统一码)
unicode 和 ASCII 一样的对照表, 只不过存的东西特别多, 基本包含了世界上大部分国家的文字, 所以我们的文字在存储的时候都是按照 unicode 编码转换成了数字进行存储
我们的 UTF-8 就是一种 8 位的 unicode 字符集

一些操作字符串的常用方法

charAt / charCodeAt / toLowerCase / toUpperCase
- charAt
  - 语法: 变量.charAt(索引)
  - 作用: 找到字符串中指定索引位置的内容然后返回
  - 返回值: 字符串中指定索引位置的内容
- charCodeAt
  - 语法: 变量.charCodeAt(索引)
  - 作用: 找到字符串中指定索引位置的 unicode 编码然后返回
  - 返回值: 字符串中指定索引位置的 unicode 编码
- toLowerCase
  - 语法: 变量.toLowerCase()
  - 作用: 将字符串转换为小写
  - 返回值: 转小写后的字符串
- toUpperCase
  - 语法: 变量.toUpperCase()
  - 作用: 将字符串转换为大写
  - 返回值: 转大写后的字符串
substr / substring / slice
- substr
  - 语法: 变量.substr(开始索引, 截取多少个)
  - 作用: 截取字符串
  - 返回值: 截取出来的字符串
- substring
  - 语法: 变量.substr(开始索引, 结束索引)
  - 作用: 截取字符串
  - 返回值: 截取出来的字符串
  - 注意: 参数包前不包后
- slice
  - 语法: 变量.slice(开始索引, 结束索引)
  - 作用: 截取字符串
  - 返回值: 截取出来的字符串
  - 注意: 参数包前不包后
concat / indexOf / lastIndexOf / split
- concat
  - 语法: 变量.concat(字符串1, 字符串2)
  - 作用: 拼接字符串
  - 返回值: 拼接好的字符串
- indexOf
  - 语法: 变量.indexOf(查找的字符, 开始索引)
  - 作用: 查找当前字符串中是否包含指定字符
  - 返回值: 找到返回第一次出现的首字母索引位置, 找不到就返回 -1
- lastIndexOf
  - 语法: 变量.lastIndexOf(查找的字符, 开始索引)
  - 作用: 查找当前字符串中是否包含指定字符 (从后往前)
  - 返回值: 找到返回第一次出现的首字母索引位置, 找不到就返回 -1
- split
  - 语法: 变量.split('分隔符')
  - 作用: 把字符串按照分隔符分开为几段内容
  - 返回值: 将字符串分割后以数组的形式分隔
trim / trimStart / trimEnd
- trim
  - 语法: 变量.trim()
  - 作用: 把字符串左右空格去除
  - 返回值: 去除空格后的字符串
- trimStart(trimLeft)
  - 语法: 变量.trimStart()
  - 语法: 变量.trimLeft()
  - 作用: 把字符串左边空格去除
  - 返回值: 去除左边空格后的字符串
- trimEnd(trimRight)
  - 语法: 变量.trimEnd()
  - 语法: 变量.trimRight()
  - 作用: 把字符串右边空格去除
  - 返回值: 去除右边空格后的字符串
includes / startsWith / endsWith / repalce
- includes
  - 语法: 字符串.includes(字符串片段)
  - 作用: 该字符串中是否包含该字符串片段
  - 返回值: 一个布尔值
    - true: 包含
    - false: 不包含
- startsWith
  - 语法: 字符串.startsWith(字符串片段)
  - 作用: 判断该字符串是否以该字符串片段开头
  - 返回值: 一个布尔值
    - true: 是开头
    - false: 不是开头
- endsWith
  - 语法: 字符串.endsWith(字符串片段)
  - 作用: 判断该字符串是否以该字符串片段结尾
  - 返回值: 一个布尔值
    - true: 是结尾
    - false: 不是结尾

其他格式字符串

查询字符串
JSON 字符串

JS的总结6

EVENT(上)

什么是 事件

常见的事件 (了解)

浏览器事件

鼠标事件

键盘事件

表单事件

触摸事件

事件对象

点击事件的光标点获取

相对于事件源

相对于浏览器窗口你点击的坐标点

相对于页面你点击的坐标点

键盘事件

确定按键

组合按键

事件的绑定方式

事件监听

addEventListener (非IE7 8 下使用)

attachEvent (IE 7 8 下 使用)

两个方式的区别

进制转换(了解)与保留小数(掌握)

Date

时间对象

时间对象的创建

将日期对象格式化成指定内容

getFullYear

getMonth

getDate

getHours

getMinutes

getSeconds

getDay

getTime

设置相关

setFullYear()

setMonth()

setDate()

setHours()

setMinutes()

setSeconds()

setMilliseconds()

setTime()

定时器

简单的代码异步执行机制

数组去重案例

严格模式(了解)

如何开启严格模式

严格模式的规则

字符串

创建字符串(了解)

ASCII 字符集(了解)

unicode 编码

一些操作字符串的常用方法

其他格式字符串

什么是事件

attachEvent (IE 7 8 下使用)