爱站程序员基地事件
事件概念
事件是通知和侦听完成的，先侦听后通知，执行对应的函数。
完成事件侦听需要以下几个因素：事件的类型必须相同，事件侦听的对象和抛发的对象必须相同，将事件抛向侦听对象就可以，先侦听后抛发。部分事件是系统默认事件，这些事件会由系统自动抛发。
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)//兼容IEdiv.removeEventListener(\'click\',clickHandler)//IE8下不兼容div.detachEventListener(\'onclick\',clickHandler)//兼容IE
事件的兼容方法的优缺点
1、addEventListener
缺点：不支持IE8及以下，方法名太长
优点：支持捕获和冒泡阶段分开侦听，支持事件抛发，支持同一个事件做多个事件回调函数，事件使用时可以将函数与内容完全分离。
2、attachEvent
缺点：IE8以上不支持，没有捕获，不支持一次点击，未来会被淘汰
优点：支持IE8以下，并且可以使一个时间调用多个回调函数。时间使用时可以将函数与内容完全分离。
3、οnclick=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=\"JavaScript/\" 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: 65e.which: 65
鼠标滚轮事件
window.addEventListener(\'mousewheel\',wheelHandler);//谷歌、IE等浏览器window.addEventListener(\'DOMMouseScroll\',wheelHandler)//火狐浏览器//当鼠标滚轮事件向上触发时的一些属性deltaX: -0deltaY: -100deltaZ: 0detail: 0wheelDelta: 120wheelDeltaX: 0wheelDeltaY: 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();}
