事件和事件绑定

一.DOM

1. 什么是事件：事件是浏览器赋予元素的默认行为，也可以理解为事件是天生具备的，不论我们是否为其绑定方法，当某些行为触发的时候，相关的事件都会被触发执行。
2. 什么是事件绑定：给元素默认的事件行为绑定方法，这样可以在行为触发的时候，执行这个方法。
3. 鼠标事件
   click：点击事件（PC：频繁点击N次，触发N次点击事件）单击事件（移动端：30ms内没有发生第二次点击操作，算作单击事件行为，所以click在移动端有300ms延迟）
   dbclick：双击事件
   contextmenu：鼠标右键点击触发
   mousedown：鼠标按下
   mouseup：鼠标抬起
   mousemove：鼠标移动
   mouseover：鼠标滑入
   mouseenter：鼠标进入
   mouseleave：鼠标离开
   mousewheel：鼠标滚轮滚动
4. 键盘事件
   keydown：键盘按下
   keyup：键盘抬起
   keypress：长按（除了Shift/Fn/CapsLock键之外）
5. 手指事件
   【Touch Event 单手指事件模型】
   touchstart：手指按下
   touchmove：手指移动
   touchend：手指松开
   【Gesture Event 多手指事件模型】
6. 表单事件
   focus：获取焦点
   blur：失去焦点
   submit：表单提交（前提：表单元素都包含在form中，并且点击的按钮是submit)
   reset：表单重置（前提：表单元素都包含在form中，并且电机的按钮是reset)
   select：下拉框内容选中
   change：内容改变
   input：移动端中经常使用的，监控文本框中的内容随着输入的改变而触发
7. 资源事件
   load：加载成功（window.onload / img.onload)
   error：加载失败
   beforeunload：资源卸载之前（window.onbeforeunload 页面关闭之前触发）
8. css3动画事件
   transitionend：transition动画结束
   transitionstart：transition动画开始
   transitionrun：transition动画运行中
9. 视图事件
   resize：元素（浏览器）大小改变
   scroll：滚动条滚动
10. DOM0级事件绑定
    语法：[元素].on[事件]=[函数]
    document.body.οnclick=null;
    原理：每一个DOM元素对象的私有属性上都有很多类似于“onxxx”的私有属性，我们给这些代表事件的私有属性赋值，就是DOM0事件绑定。
    【如果没有对应时间的私有属性值则无法基于这种办法实现事件绑定。
    【只能给当前元素的某个事件行为绑定一个方法，绑定多个方法，最后一个操作会覆盖以往的
    【执行效率快，而且开发者使用起来方便
    DOM2级事件绑定
    语法：[元素].addEventListener([事件],[方法],[捕获/冒泡])
    document.body.addEventListener(‘click’,fn1,false)
    移除：[元素].removeEventListener([事件],[方法],[捕获/冒泡]) 但是需要参数和绑定的时候一样
    document.body.removeEventListener(‘click’,fn1,false)
    原理：每一个DOM元素都会基于__proto__查找到EventTarget.prototype上的addEventListener/removeEventListener等方法，但是基于这些方法实现事件的绑定和移除，DOM2事件绑定采用事件池机制；
    DOM2事件绑定，绑定的方法一般不是匿名函数，主要目的是方便移除事件绑定的时候使用。
    凡是浏览器提供的事件行为，都可以基于这种模式完成事件的绑定和移除（例如：window.onDOMContentLoaded是不行的，因为没有这个私有的事件属性，但是可以window.addEventListener(‘DOMContentLoaded’,func)这样是可以的）
    可以给当前元素的某个事件类型绑定多个“不同”的方法（进入到事件池），这样当事件行为触发，会从事件池中依次（按照绑定的顺序）取出对应的方法然后执行。
11. 事件对象：存储当前事件操作及触发的相关信息的（浏览器本身记录的，记录的是当前这次操作的信息，和在哪个函数中无关）
    鼠标事件对象：MouseEvent
    clientX/clientY：鼠标触发点距离当前窗口的X/Y轴坐标。
    pageX/pageY：鼠标触发点距离BODY的X/Y轴坐标。
    type：事件类型
    target/srcElement：获取当前事件源（当前操作的元素）
    path：传播路径
    ev.preventDefault() / ev.returnValue=false：阻止默认行为。
    ev.stopPropagation() / ev.cancelBubble=true：阻止冒泡传播。
    键盘事件对象 KeyboardEvent
    which / keyCode：获取按键的键盘码
    方向键：“左37 上38 右39 下40”
    Space：32
    BackSpace：8
    Del：46 MAC电脑中没有BackSpace，delete键是8
    Enter：13
    Shift：16
    Ctrl：17
    Alt：18
    altKey：是否按下alt键（组合按键）
    ctrlKey：是否按下ctrl键（组合按键）
    shiftKey：是否按下shift键（组合按键）
    TouchEvent：手指事件对象
    changedTouches / touches：都是用来记录手指的信息的，平时常用的是changedTouches
    手指按下、移动、离开屏幕changedTouches都存储了对应的手指信息，哪怕离开屏幕后，存储的也是最后一次手指在屏幕中的信息；而touches在手指离开屏幕后，就没有任何的信息了；=》获取的结果都是一个TouchList集合，记录每一根手指的信息。
    ev.changedTouches[0] 第一根手指的信息
    clientX / clientY
    pageX / pageY
    默认行为：浏览器会赋予元素很多默认的行为操作。
    鼠标右键菜单
    点击A标签实现页面的跳转
    部分浏览器会记录输入记录，在下一次输入的时候有模糊匹配
    键盘按下会输入内容
    可以基于ev.preventDefault()来禁用。
    A标签的默认行为：
    页面跳转、锚点定位（定位到当前页面指定ID的盒子位置，URL地址中会加入HASH值）

<a href="#box" id="link">哈哈</a>
<div class="box" id="box"></div>

阻止默认行为，如下：

<a href="javascript:;" id="link">哈哈</a>

<a href="http://www.baidu.com/" id="link">哈哈</a>
<script>
link.onclick=function(ev) {
ev.preventDefault();
//或者是
return false;
}
</script>

二.事件的传播机制

DOM0事件绑定中给元素事件行为绑定的方法，都是在目标阶段/冒泡阶段触发的。
DOM2事件绑定可以控制在绑定方法在捕获阶段触发（无实际意义）
元素.addEventListener(事件，方法，false/true)
最后一个参数默认是false：控制方法是在冒泡阶段触发执行的，如设置为true可以控制在捕获阶段触发执行。
1.

<div class="box">
	<div class="outer">
		<div class="inner">
		</div>
	</div>
</div>
<script>
//因为点击事件行为存在冒泡传播机制，所以不论点击INNER/OUTER/BOX，最后都会传播到BODY上，触发BODY的CLICK事件行为，把其绑定的方法执行。
//在方法执行接受到的事件对象中，有一个target/srcElement属性（事件源），可以知道当前操作的是谁，此时方法中可以根据事件源的不同，做不同的处理。
//此机制就是“事件委托/事件代理”：利用事件的冒泡传播机制，我们可以把一个“容器A”中所有后代元素的某个“事件行为E”触发要做的操作，委托给A的事件行为E，这样后期只要触发A中任何元素的E行为，都会传播到A上，吧给A绑定的方法执行，再方法执行的时候，基于事件源不同做不同的处理。

document.body.onclick=function (ev){
let target=ev.target,
	targetClass=target.className;
if(targetClass==="inner"){
	console.log("INNER");
	return;
}
if(targetClass==="outer"){
	console.log("OUTER");
	return;
}
if(targetClass==="box"){
	console.log("BOX");
	return;
}
}
</script>

三.mouseover和mouseenter区别
1.


2.