1.事件和事件类型

事件发生必须绑定
绑定事件
1.内联模式
2.外联模式/脚本模式(最多)
绑定事件格式：元素节点.on+事件类型 = 匿名函数
click 事件类型
onclick 事件处理函数

事件类型的种类
一、鼠标事件（可以绑定任意的元素节点上)

• click 单击
• dblclick 双击
• mouseover 鼠标移入 经过子节点会重复触发
• mouseout 鼠标移出 经过子节点会重复触发
• mousemove 鼠标移动（会不停的触发）
• mousedown 鼠标按下
• mouseup 鼠标抬起
• mouseenter 鼠标移入 经过子节点不会重复触发 IE8以后才有
• mouseleave 鼠标移出 经过子节点不会重复触发

二、键盘事件（表单元素，全局window）

• keydown 键盘按下（如果按下不放手，会一直触发）
• keyup 键盘抬起
• keypress 键盘按下（只支持字符键）

三、HTML事件
1.window事件

• load 当页面加载完成后会触发
• unload 当页面解构的时候触发（刷新页面，关闭当前页面）IE浏览器兼容
• scroll 页面滚动
• resize 窗口大小发生变化的时候触发

2.表单事件

• blur 失去焦点
• focus 获取焦点
• select 当我们在输入框内选中文本的时候触发
• change 当我们对输入框的文本进行修改并且失去焦点的时候
  【注】必须添加form元素上
• submit 当我们点击submit上的按钮才能触发
• reset 当我们点击reset上的按钮才能触发

2.事件获取方式

固定写法 首先要获取事件，才能调用事件对象的属性
var e = ev ||window.event;
事件对象：
button属性
0 左键
1 滚轮
2 右键
获取当前鼠标的位置：（原点位置不一样）
clientX clientY 原点位置：可视窗口的左上角为原点 无单位
pageX pageY 原点位置：整个页面的左上角为原点（包含滚出去的滚动距离）
screenX screenY 原点位置：电脑屏幕的左上角

window.onload = function () {var oBtn = document.getElementById("btn1");oBtn.onclick = function (ev) {var e = ev || window.event;alert(e);}}

3.事件对象属性

• shiftKey 按下shifit键，为true,默认为false
• altKey
• ctrlKey
• metaKey windows系统 按下windows(开始键) 为true
  macos 系统 按下command 为true
  [注]和别的操作进行组合，形成一些快捷键操作

键盘事件对象

keyCode 键码
which
格式： var which=e.which ||e.keyCode
返回值：键码返回的是大写字符的ASCII值，不区分大小写
[注]只在Keydown下支持
charCode 字符码
which
格式：var which=e.which||e.charCode;
返回值：字符码区分大小写，返回当前按下键的ASCII值，不支持功能键
[注]只在keypress下支持，不支持字符串

4.事件冒泡和触发对象

target 目标对象/触发对象 事件对象的属性
【注】这个事件是由谁引起的
IE8以下不兼容 window.event.srcElement;
var target = e.target || window.event.srcElement;
this永远指向当前函数的主人

事件冒泡 浏览器天生带有 由里向外逐级触发
事件捕获：由外到里逐级触发
阻止事件冒泡：浏览器兼容问题
事件对象的属性和方法：
cancelBubble = true stopPropagation()
//封装跨浏览器兼容的阻止事件冒泡

function stopBubble(e) {e.stopPropagation ? stopPropagatione() : e.stopBubble = true;}}

5.阻止默认行为和超链接

官方的右键 return false 添加方法
阻止超链接的默认行为：
1. 简陋的阻止a链接默认行为的方式
缺点：运行到了return 后续的内容我们就执行不到了
2. 规范的方法
e.preventDefault();
window.event.returnValue = false;
需要兼容

function preDef(e) {if (e.preventDefault) {e.preventDefault();} else {window.event.returnValue = false;}
}

6.拖拽

拖拽：（拖拽的三剑客） 伪代码（代码草稿）
mousedown
纪录鼠标按下位置和被拖拽物体的相对距离
var offSetX = e.clientX - node.offsetLeft;
var offSetY = e.clientY - node.offsetTop;
mousemove
一致保持，相对距离
node.style.left = e.clientX - offSetX +“px”;
node.style.top = e.clientY - offsetY +“px”;
mouseup
取消拖拽 document.onmousemove = null;
输出当前窗口的高
var windowWidth = document.documentElement.clientWidth ||document.
body.clientWidth;

7.事件委托

1. 浪费
2. 后添加的li节点没有点击事件

事件委托实现步骤：
1. 找到当前节点的父节点或者祖先节点
2. 将事件添加到你找到的父节点或者祖先节点上
3. 找到触发对象，判断触发对象是否是想要的触发对象，进行后续操作

window.onload = function () {var oUl = document.getElementById("ul1");oUl.onclick = function (ev) {var e = ev || window.event;var target = e.target || window.event.srcElement;if (target.nodeName.toLowerCase() == 'li') {target.style.backgroundColor = "red";}}var oBtn = document.getElementById("btn1");var i = 6;oBtn.onclick = function () {var newNode = document.createElement("li");newNode.innerHTML = i++ * 1111;oUl.appendChild(newNode);}
}

8.事件监听器

1. 传统事件绑定
   (1)重复添加，覆盖
   (2)不能精确的删除事件上的某一个函数

2. 事件监听器(低版本不兼容) 可以精确的删除添加某一个函数
   addEventListener()
   格式：node.addEventListener(“click”)
   参数：
   第一个参数 事件类型
   第二个参数 绑定函数
   第三个参数 布尔值  true 事件捕获  flase 事件冒泡 默认

   removeEventListener()
   格式：node.removeEventListener()
   参数：
   第一个参数 事件类型
   第二个参数 删除函数名字
   上两个需要和下两个兼容
   attachEvent(“on”+evenType,funcName);
   detachEvent(“on”+evenType,funcName);

 function addEvent(node, evenType, funcName) {if (node.addEventListener) {node.addEventListener(evenType, funcName, false);} else {node.attachEvent("on" + evenType, funcName);}}function removeEvent(node, evenType, funcName) {if (node.removeEventListener) {node.removeEventListener(evenType, funcName);} else {node.detachEvent("on" + evenType, funcName);}}

9.正则表达式

1. 通过new去声明正则表达式
   第一个参数：正则表达式的主体 字符串
   第二个参数：修饰符 i g 修饰符没有顺序
   var box1=new RegExp(“hello”,“ig”);
   alert(box1);
2. 省略new运算符去声明正则表达式
   var box1=RegExp(“hello”,“ig”);
   alert(box1);
3. 通过常量赋值
   var box1=/hello/ig;
   alert(box1);

正则表达式对象只有两个方法
test
格式：正则.test()
功能：在字符串中匹配这个正则是否存在
返回值：如果匹配成功返回true，匹配失败返回false
var str = “how are you”;
var box = /are/;
alert(box.test(str));
exec
格式：正则.exec(字符串)
功能：在字符串中匹配这个正则是否存在
返回值：返回值匹配到的串，匹配成功，返回一个装有字符串的数组, 匹配失败，返回null
var str = “how are you”;
var box = /are/i;
alert(box.exec(str)[0]);

正则能使用字符串的方法

1. match()
   格式：字符串.match(正则)
   功能：在字符串匹配是否有符合正则表达式
   返回值：匹配成功，返回装有匹配到子串的数组; 匹配失败，返回null
2. replace()
   格式：字符串.replace(oldStr/正则，newStr);
   功能：用newStr将OldStr替换
   返回值：替换成功的新字符串
3. split()
   格式：字符串.splite（分隔符/正则）
   功能：用分隔符将原字符串进行分割
   返回值：分割剩下的子串组成的数组
4. search()
   格式：字符串.search(子串/正则)
   功能：找到符合条件的子串第一次出现的位置
   返回值：如果找到，返回>=0的下标; 否则，返回-1
   /* var str = “how are Are ARE you”;
   var arr = str.split(“are”);
   alert(arr); */

正则_元字符

元字符：在正则表达式中有特殊含义的字符
单个数字和字符的原字符
. 匹配单个的任意字符
[] 匹配单个范围内的字符
[0-9]
[a-zA-Z0-9] 匹配单个的数字、字母下划线
[^] 匹配任意一个除括号范围内的字符
[^0-9] 匹配任意一个非数字字符
\w 匹配单个的数字、字母下划线 等价于[a-zA-Z0-9]
\W 匹配单个非数字、字母下划线
\d 匹配单个数字 等价于[0-9]
\D 匹配单个非数字 等价于[^0-9]
var box = /g[^0-9]ogle/
重复字符 x(任意的单个字符)
x? 匹配0个或者1个x
x+ 匹配至少一个x字符
x* 匹配任意个x字符
x{m,n} 匹配至少m个，最多n个字符，包括n
x{n} 必须匹配n个x字符
(xyz)+ 小括号括起来的部分是当作单个字符处理
空白字符
\s 匹配任意单个的空白字符
\S 匹配任意单个非空白字符
锚字符
^ 行首匹配 必须以这个正则开头
$ 行尾匹配 必须以这个正则结尾
替代字符 ｜
i 忽略大小写 g全局匹配 m换行匹配
转义字符
. 代表本来.字符
* 代表本来是*字符

//验证是否是正确的手机号码var box=/^1\d{10}$/;
//验证是否是正确的身份证号码var box=/^[0-9]\d{16}(\d|x)$/;
//验证字符串是否是纯中文var box=/^[\u4e00-\u9fa5]+$/;

10.localStorage

本地存储技术：
(1) localStorage(IE8以下不兼容)
1. 永久存储
2. 最大可以存储5K 客户端的一个微型数据库
3. 只能存储string
localStorage的局限
1. 浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2. 前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的
JSON对象类型需要一些转换
3. localStorage在浏览器的隐私模式下面是不可读取的
4. localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
5. localStorage 不能被爬虫抓取到
6. localStorage属于永久性存储
(2) cookie
1. 可以设置过期时间
2. 最大可以存4KB
3. 每一个域名下面最多可以存储50条数据
(3) sessionStorage (结合后台使用)
存储数据更小，空间更少，只能保留一次对话

localStorage 对象
setItem(name,value)
getItem(name)
removeItem(name)

   if (!window.localStorage) {alert("当前页面不支持localStorage");} else {localStorage.setItem("a", "1");localStorage.b = "2";localStorage["c"] = "3";alert(localStorage.getItem("b"));localStorage.removeItem("a");}

11.this指向

this指向当前函数的主人
每一个函数都有一个内置的变量this，this指向当前函数的主人，函数的主人要根据上下文关系进行判断

常见this
全局函数：指向window
对象：指向当前对象的主人
事件绑定：指向当前事件

强制类型转换

call 格式：函数名.call()
参数
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数开始：将原函数的参数往后顺延一位
apply 格式：函数名.apply()
参数：
第一个参数：传入该函数this指向的对象，传入什么强制指向什么
第二个参数：数组 数组，放入我们原有所有的参数
bind 预设this指向

	function show(x, y) {alert(this);alert(x + "," + y);}// show.call("call", 20, 40); //call//20,40show.apply('apply', [20, 40]); //call//20,40var res = show.bind("bind");//alert(res);//function () { [native code] }res(40,50);//bind //40,50//简化 show.bind(“bind”)(40,50);//Math.min(10,20,30)var arr = [10, 20, 30, 40];alert(Math.min.apply(null, arr));

12.let const关键字

let 关键字是用来声明变量 更过分，只要遇到大括号就形成作用域
【注】let关键字声明的变量，所在作用域叫做块级作用域
var 关键字声明变量 将变量或者形参所在函数的大括号作为作用域处理
const 声明变量，变量值只能在声明的时候确定，后续是没有办法修改的
【注】const声明变量 不是常量,声明变量不能改（变量没有办法改）

13.箭头函数

箭头函数：新潮的函数写法
[注] 适当的省略函数中的function和return关键字

箭头函数需要注意的部分
1. 箭头函数，不能用new
2. 箭头，如果返回值是一个对象，一定要加（）
3. 箭头函数中的this，指向的是上一层函数的主人
*/

/* 1.无参数无返回值 */function show() {alert("hello world");}var show = () => {alert("hello world");};/* 2.有1个参数无返回值 */function show(num) {alert(num);}var show = (num) => {alert(num);};/*3. 有一个参数有返回值   最有价值*/function add(x) {return x + 10;}var add = x => x + 10;/* 4.多个参数，无返回值 */function show(x, y) {alert(x + y);}var show = (x, y) => {alert(x + y);};var arr = [10, 29, 49,50];/* var newArr=arr.filter(function(item){return item>20;}) */var newArr = arr.filter(item => item > 20);var newArr=arr.map(item=>item*1.3);