事件
事件概念
事件是通知和侦听完成的，先侦听后通知，执行对应的函数。
完成事件侦听需要以下几个因素：事件的类型必须相同，事件侦听的对象和抛发的对象必须相同，将事件抛向侦听对象就可以，先侦听后抛发。部分事件是系统默认事件，这些事件会由系统自动抛发。
document.addEventListener('aa',eventHandler);
function eventHandler(e){console.log(e)}
//侦听事件
var evt = new Event('aa')//创建一个相同类型事件的事件对象，事件类型必须是一个字符串。
document.dispatchEvent(evt)//抛发事件
事件侦听会帮我们将代码分离成一个独立的体系，可以相互传递一些参数，当代码即使删除一部分也不会出现代码报错的现象。
事件原理
事件对象.addEventListener(事件类型，事件回调函数，是否捕获阶段,)默认的捕获阶段是false
事件对象必须是EventTarget 或者继承他所产生的子类
事件原理：事件会经过三个阶段，捕获阶段，目标阶段，冒泡阶段。捕获阶段从外向里，目标阶段到达目标，冒泡阶段从里到外。
e.currentTarget 事件的侦听对象 也就是this
e.target相当于e.scrElement或者e.toElement 事件点击的目标对象
e.stopPropagation()停止冒泡
e.cancelBubble=true IE兼容事件，取消冒泡
事件兼容
var div = document.querySelector('div');
div.addEventListener('click',clickHandler,{once:true});
function clickHandler(e){
//删除事件侦听(事件类型，删除事件侦听的回调函数)
this.removeEventListener('click',clickHandler);
this.removeEventListener('click',arguments.callee)
}//IE8不兼容
div.addEventListener('click',clickHandler)//IE8下不兼容
div.attachEvent('onclick',clickHandler)//兼容IE
div.removeEventListener('click',clickHandler)//IE8下不兼容
div.detachEventListener('onclick',clickHandler)//兼容IE
事件的兼容方法的优缺点
1、addEventListener
缺点：不支持IE8及以下，方法名太长
优点：支持捕获和冒泡阶段分开侦听，支持事件抛发，支持同一个事件做多个事件回调函数，事件使用时可以将函数与内容完全分离。
2、attachEvent
缺点：IE8以上不支持，没有捕获，不支持一次点击，未来会被淘汰
优点：支持IE8以下，并且可以使一个时间调用多个回调函数。时间使用时可以将函数与内容完全分离。
3、onclick=fn
优点：全浏览器支持，不考虑兼容问题，代码便捷
缺点：不支持事件抛发机制，只能使用系统默认事件，同一个元素同一个事件不支持多个回调函数，因为代码大量使用匿名函数，容易造成回调地狱，并且开发中代码实际功能不能分离。
事件对象
e.type 事件类型 click
e.target e.srcElement 时间目标对象
e.currentTarget this 事件侦听对象
e.cancelBubble 设置取消冒泡
var evt = new Event('aa') 创建事件对象
这个对象就相当于设置侦听回调函数参数的 e
事件类型
1、Event事件
change事件
只能对于表单出发
<input type="text" id="user">
<select multiple>
<option>北京</option>
<option>西安</option>
<option>武汉</option>
<option>天津</option>
<option>青岛</option>
</select>
var user = document.querySelector('#user');
var select=document.querySelector("select")
user.addEventListener('change',changeHandler)
select.addEventListener('change',changeHandler)
input的change事件是当input.value发生改变，并且失去焦距时触发
select的change事件是seclect.value发生改变时触发，用selectedIndex和selectedOptions可以获取select中被选中的索引和选项。
select 事件
主要针对input或者textArea中的文本，当选择文本框中的文本内容时触发事件，与下拉菜单的select无关。
var user = document.querySelector('#user');
user.addEventListener('select',selectHandler);
function selectHandler(e){
// console.log(input.selectionStart);选中值的开始位置下标
// console.log(input.selectionEnd); 选中值的结束位置下标
//console.log(user.selectionDirection);//选择的方向
console.log('a')
}
load和error事件
用于图片的加载，Ajax通信以及JSON或者其他文件的加载等load是加载成功，error是加载错误，load是当页面所有元素加载完才触发，如果内容过多加载事件会很长，一般尽量不要这样写。error当加载图片的地址错误或者其他原因造成加载失败时触发。
window.addEventListener("load",loadHandler);
function loadHandler(){
console.log(e)
}
window.onload=function(){
console.log(e)
}
submit和reset事件
只能针对form表单侦听 提交和重置时收到事件；
<form action="http://www.163.com" method="GET">
<input type="text" name="user">
<input type="password" name="password">
<input type="submit">
<input type="reset">
</form>
form.addEventListener("submit",submitHandler);
form.addEventListener("reset",submitHandler);
function submitHandler(e){
e.preventDefault();// e.returnValue=false 兼容写法
console.log(e);
}// 阻止默认事件
resize事件
针对window和textArea的事件，当可视窗口发生改变时收到时间。
window.addEventListener("resize",resizeHandler);
function resizeHandler(e){ console.log(document.documentElement.clientWidth)
}
scroll滚动事件，当滚动条的位置发生变化时触发，针对一切带有滚动条的元素。
document.addEventListener("scroll",scrollHandler);
function scrollHandler(e){
console.log('e')
}
unload卸载事件
当关闭窗口或者原有的页面刷新是触发
e.preventDefault()，不能阻止卸载事件
window.addEventListener("unload",unloadHandler);
function unloadHandler(){
consloe.log(e)
}
2、历史事件PopStateEvent
popstate事件
历史记录被回退和前进时触发
document.addEventListener("click",clickHandler);
window.addEventListener("popstate",popstateHandler)
function clickHandler(e){
history.pushState({a:1},"","#1");
}
function popstateHandler(e){
console.log(e);
}
3、鼠标事件
var div=document.querySelector(".div0");
div.addEventListener("mousedown",clickHandler);//鼠标按下
div.addEventListener("mouseup",clickHandler);//鼠标释放
div.addEventListener("click",clickHandler);//鼠标左键单击
div.addEventListener("dblclick",clickHandler)//鼠标左键双击
div.addEventListener("mouseover",clickHandler);//鼠标滑过
div.addEventListener("mouseout",clickHandler);//鼠标滑出
div.addEventListener("mouseenter",clickHandler);//鼠标进入
div.addEventListener("mouseleave",clickHandler);//鼠标离开
// mouseover mouseout具有冒泡功能可以收到鼠标滑入滑出子元素的冒泡事件
// mouseenter mouseleave仅对侦听的对象起到事件接收作用
div.addEventListener("mousemove",mouseHandler);//鼠标移动
div.addEventListener("contextmenu",mouseHandler);//右键菜单
鼠标事件(mouseEvent)的常见属性
console.log(e.clientX,e.ClientY)//距离可视区域左上角的位置
console.log(e.layerX,e.layerY)// 如果目标对象是定位方式，值与offset相似，如果目标对象不是定位方式，取有定位的父容器左上角的位置。
console.log(e.offsetX,e.offsetY)//相对事件目标对象左上角的位置。
console.log(e.movementX,e.movementY)//鼠标移动时距离上次的相对位置。
console.log(e.pageX,e.pageY)//相对页面左上角的位置
console.log(e.screenX,e.screenY)//相对屏幕左上角的位置
console.log(e.x,e.y)//与clientX，clientY相同
altKey:false, crtlKey:false, metaKey:false（苹果电脑）, shiftKey:false;//当按下键盘上的对应键时为true；
button，buttons,which//针对mousedown事件的属性，判断按下的键，不同的键属性值不同。
4、焦距和input事件
var input1=document.querySelector("#input1");
input1.addEventListener("focus",focusHandler);//当input获得焦距的时候
input1.addEventListener("blur",focusHandler);//当input失去焦距的时候
console.log(e.relatedTarget)//上次获取焦距的元素
input1.addEventListener("input",inputHandler);//当input中的内容改变时持续发生
console.log(e.data)//输入的内容
consloe.log(e.inputType)//insertText" 输入的类型 insertCompositionText包括插入文本，删除文本，插入输入法文本，剪切粘贴文本等等
consloe.log(e.isComposing)是否是文本
5、键盘以及鼠标滚轮事件
键盘事件
document.addEventListener('keydown',keyHandler);
//当键盘按下键的时候
document.addEventListener('keyup',keyHandler);
//当键盘按键释放的时候
document.addEventListener('keypress',keyHandler);
//当键盘按下释放的时候
//当按下键盘上的a时,会有下面这些数据，都是根据不同的按键发生变化的。
e.code: "KeyA"
e.key: "a"
e.keyCode: 65
e.which: 65
鼠标滚轮事件
window.addEventListener('mousewheel',wheelHandler);
//谷歌、IE等浏览器
window.addEventListener('DOMMouseScroll',wheelHandler)//火狐浏览器
//当鼠标滚轮事件向上触发时的一些属性
deltaX: -0
deltaY: -100
deltaZ: 0
detail: 0
wheelDelta: 120
wheelDeltaX: 0
wheelDeltaY: 120
//在火狐浏览器中detail为-3
阻止默认事件的用法
1、表单中的submit和reset使用阻止默认事件可以取消提交和重置
var form=document.querySelector("form");
form.addEventListener("submit",formHandler);
form.addEventListener("reset",formHandler);
function formHandler(e){
e.preventDefault();
}
2、当使用contextmenu事件时可以取消鼠标右键弹出菜单
document.addEventListener("contextmenu",mouseHandler);
function mouseHandler(e){
e.preventDefault();
}
3、当针对元素拖拽时，元素内有文本，文本会被选中
var div=document.querySelector("div");
document.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
e.preventDefault();
}
4、图片拖拽时产生禁止拖拽图标
var img=document.querySelector("img");
img.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
e.preventDefault();
}
