事件（初学知识点）
事件：
- 用户在浏览器操作的时候，在某种条件成立时而触发（事件、事务）的一种交互行为
- 每个元素自身就有事件，只不过默认为null，当某个事件绑定了一个函数之后，用户在操作浏览器的时候，触发了这个事件，那么就执行事件函数。
- 用户操作浏览器的时候会触发很多的事件，只有绑定了事件函数的事件才会对用户有响应，但没有响应的事件并不是没触发，只是没有事件函数而已
- 某个元素有这个事件，事件值默认为null，如果没有这个事件，事件值为undefined（访问了某个对象一个没有设置的属性而已）
事件绑定：
在传统事件中，同一个元素绑定多个同一个事件，那么后面的事件函数会把前面的事件函数覆盖。在DOM2事件绑定中，可以让同一个元素，绑多次同一个事件。
DOM 0 级 事件：
on开头的
解除事件：
ele.onxxx = null
DOM 1 级 事件：
DOM级别1于1998年10月1日成为W3C推荐标准。
1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。
DOM 2 级 事件：
在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个 事件模型 。这个标准下的事件模型就是我们所说的2级DOM事件模型。
在DOM2事件绑定中，可以让同一个元素，绑多次同一个事件
addEventListener 添加事件绑定（监听）
removeEventListener 解除事件绑定
ele.addEventListener("不带on的事件名"，事件函数，布尔值（默认不捕获））//事件函数要起个名字，以便在解除的时候拿到同一个函数地址
ele.removeEventListener（"不带on的事件名"，事件名（和绑定事件的函数为同一个地址），布尔值）
在开发移动端的时候，就要用DOM2，不然有些浏览器不会触发手机端事件
IE低版本用：
绑定：box.attachEvent(“带 on 的事件名”，function(){} )
解除：box.detachEvent("带 on 的事件名"，function(){} )
例子：
box.addEventListener('click',fn);//给box绑定click事件
function fn(){
alert(1);
}
btn.addEventListener('click',function(){
box.removeEventListener('click',fn);
})//点击btn的时候移除box的click事件函数
事件模型：捕获 -> 目标 -> 冒泡
1. 先捕获，再冒泡。2.同一元素有多个捕获或者多个冒泡的时候，执行同一阶段的时候会按照 这个阶段的 代码（事件绑定）的先后顺序执行。
冒泡：
从目标点由下而上直到window的过程叫冒泡。
如果目标元素和祖先元素绑定了同一种事件，那么在执行完目标元素的事件之后，同样会调用祖先级的事件函数
祖先元素：在css中的结构中，标签套标签，外层的标签是内层标签的父级或者祖先级
捕获：
从window起，自上而下，直到目标点的过程叫捕获。
DOM 0 是检测不到捕获的，只能用DOM2来检测捕获的过程。
DOM2绑定中的最后一个参数，是否捕获（true要捕获，false不捕获（冒泡））。 默认为false，不捕获。
事件流（事件模型）：
当一个事件触发的时候，一般会经历3个过程，第一个为 捕获 阶段， 第二个为 目标 阶段，第三个为 冒泡 阶段。 这三个阶段就叫做事件流（事件模型）
目标阶段：
事件触发到目标元素的时候，会按照 代码（事件绑定）的先后顺序执行，不再是先捕获后冒泡。
例子：
<div id="div2">
<button id="btn">点击</button>
</div>
<script>
div2.addEventListener('click',function(){
alert('捕获_div');
},true)
div2.addEventListener('click',function(){
alert('冒泡_div');
},false);
btn.addEventListener('click',function(){
alert('目标按钮_a');
},false)
btn.addEventListener('click',function(){
alert('目标按钮_b');
},true)
btn.addEventListener('click',function(){
alert('目标按钮_c');
},false)
</script>
/* 点击btn时的弹框顺序：(1捕获阶段） 捕获_div => （2目标阶段） 目标按钮_a =>目标按钮_b => 目标按钮_c =>(3冒泡阶段) 冒泡_div */
事件对象： event
当用户触发了某个事件的时候，那个事件函数的第一个参数就为事件对象，这个对象是记录了用户操作浏览器或者元素时的相关细节信息。
低版本 IE 中的事件对象不在事件函数中，在window上，有个event属性。
FF（火狐浏览器）下事件对象只有在事件函数的第一个参数中才有，window上是没有的。如果在FF下直接访问event就会报错（因为没有这个变量）
解决：var ev = window.event || ev
Chrome（谷歌浏览器） 中 window有，事件函数中的第一个参数也有
事件源（事件监听）：target
事件对象其中有一个属性叫 target，能够捕获到事件触发时的源头是哪个元素。可以节省性能
注意：只有嵌套关系，才能获得准确的事件源
例子（冒泡的优点）：
<body>
<ul id="ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
ul.onclick = function(ev){
// console.dir(window.event);
var ev = window.event || ev//兼容火狐和IE低版本
console.log(ev.target);//可以输出点击的是谁（找到事件源）
if(ev.target.nodeName === 'LI'){
ev.target.style.background = 'green';
}//如果事件源是 li 就让 它变绿
}
//把onclick绑在 ul 上，利用 冒泡 原理，改变 li 的样式，就不用通过循环 li 并绑定事件的方法来达到效果，优化性能。
</script>
</body>
阻止冒泡：（注意：取消冒泡 一定要 在事件源上阻止冒泡，能解决父级执行的问题）
ev.cancelBubble = true // 阻止冒泡
ev.cancelBubble 不是标准属性，但是所有浏览器都能兼容
ev.stopPropagation() 这个是标准，但是低版本浏览器不兼容
注意：
在开发的过程中，如果2个元素时嵌套关系，就要小心，事件冒泡（2个事件尽量不要重名）
例子（冒泡的缺点与解决办法）：
btn.onclick = function(ev){ alert(1) // ev.stopPropagation(); ev.cancelBubble = true; //阻止了btn的onclick的事件不往上面冒泡。 }
事件默认行为：
当用户触发某个事件的时候，某种行为不是我们主动写的而是浏览器默认可以做的，就叫事件默认行为。
阻止默认行为：
DOM 0中：在事件函数中，写 return false
DOM 2中：ev.preventDefault()
例子：
// document.onmousedown = function(){ // console.log('按下'); // return false;//DOM 0 中阻止默认行为 // } document.addEventListener('mousedown',function(ev){ //console.log('按下'); ev.preventDefault();//DOM2中阻止默认行为 }); //如果在document下有一张图片，鼠标按下的时候可以触发事件默认的拖动行为，在阻止了默认行为的之后，就不能再触发拖动行为。
常见的事件
点击事件是由2个事件组合在一起的形成的新事件
按下：onmousedown
抬起：onmouseup
onclick 点击时触发
ondblclick 双击事件
onscroll 鼠标中键，带动滚动条滚动时触发。（滚动条发生位移，可视区变化时触发。（window.onscroll = function( ){ } ））
oncontextmenu 鼠标右键菜单
onmousemove 鼠标移动事件
onmouseover 鼠标移入时触发
onmouseout 鼠标移出时触发
onmouseenter 不会冒泡 ，也不会穿透 移入
onmouseleave 不会冒泡，也不会穿透 移出
（不穿透：移入嵌套关系的子元素时，不会触发父元素的移出事件。不冒泡：移入嵌套关系的子元素时，不会触发父元素的移入事件。）
ev.clientX / ev.clientY 鼠标到可视区（基于可视区）的 x、y 轴
ev.pageX / ev.pageY 鼠标到可视区（基于页面）的 x、y 轴
css中的 cursor，可以改变鼠标的样式
例子：
document.onmousemove = function(ev){ //console.log(ev.pageY,ev.clientY); box.style.left = ev.clientX - box.offsetWidth/2 + 'px'; // box.style.top = ev.clientY - box.clientHeight/2 + window.pageYOffset +'px'; box.style.top = ev.pageY - box.clientHeight/2 + 'px'; } //鼠标移动事件，让box跟着鼠标走
onresize 当页面缩放时触发
onscroll 当滚动时触发
onerror 事件在加载外部文件（文档或图像）发生错误时触发。（不支持冒泡，不能取消，语法上网查）
onload 静态资源加载完成之后执行（window.onload）
oninput 输入时触发，可动态获取内容
onchange 表单元素的内容改变，失去焦点的时候触发
onblur() 失焦时触发
onfocus() 聚焦时触发
select() 选中（选中表单内容，方便剪切复制，在没有内容的时候，也可以看做 聚焦）
ele.focus() 自动聚焦 （css 中用 autofocus ，一个页面只有一个焦点元素会被激活，一开始，页面中有一个焦点，当按了tab键或者直接激活之后焦点会从页面（window，document）中移到焦点元素身上）
ele.blur() 自动失焦
window.onhashchange 当hash值发生变化时触发。语法：window.onhashchange = function (){ ‘放要执行的内容’ }
document.onvisibilitychange 浏览器窗口切换或者缩小时触发（HTML5新增事件）
例子：
document.addEventListener("visibilitychange", function() {
console.log( document.hidden );
// Modify behavior...
});
按事件类型分类
课件：2018/11/16
