1. 绑定事件
addEventListener： chrome，firefox，IE9
attachEvent：IE8 及IE8以下
function addHandel(element, type, handel) {
if (element.addEventListener) {
element.addEventListener(type, handel, false);
} else if (element.attachEvent) {
element.attachEvent("on"+type, handel);
} else {
element["on"+type] = null;
}
}2. 解除事件
removeEventListener： chrome，firefox，IE9
detachEvent：IE8 及IE8以下
function removeHandler(element, type, handler){
if (element.removeEventListener) {
element.removeEventListener(type, handel, false);
} else if (element.detachEvent) {
element.detachEvent("on"+type, handel);
} else {
element["on"+type] = null;
}
},3. 获得事件
function getEvent(event){
return event? event : window.event;
}4. 获得事件目标
function getTarget(event){
return event.target || event.srcElement;
}5. 阻止默认行为
function preventDefault(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
6. 阻止事件冒泡
function stopPropagation(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}7. clientY，pageY，screenY的区别
clientY：浏览器顶部底边到鼠标的距离，不计算滚动轴的距离（固定的）
pageY：浏览器顶部底边到鼠标的位置，需要加上滚动轴的距离；
screenY：屏幕顶部到鼠标的位置（固定的，浏览器窗口大小的变化也没有影响）
8 . 事件对象处理
| 对象描述 | 浏览器的兼容性 | |
|---|---|---|
| 键盘值 | e.which | e.keyCode |
| 鼠标位置 | e.X / e.Y | e.pageX / e.pagY |
9. mouseover / mouseout || mouseenter / mouseleave 区别
常用：
mouseover ： 进入目标元素或则子元素时执行
mouseout ： 离开目标元素或则子元素时执行
mouseenter ：进入目标表元素时才触发
mouseleave： 离开目标元素时才会触发
10 . e.button 的区别
常规浏览器：
| e.button | |
|---|---|
| 左键 | 0 |
| 右键 | 2 |
| 中间滚轮 | 1 |
IE8 ：
11. keydown 与 keypress
keydown： 键码，任意键触发
var c = document.querySelector('.input')
c.addEventListener('keydown', function(e) {
console.log(e.keyCode) //确定键为13，a为65...
} , false)keypress：ASCII码，字符键触发
var c = document.querySelector('.input')
c.addEventListener('keypress', function(e) {
console.log(e.charCode) //确定键为13，a为97 并且其他esc、delete等按键无效
} , false)12. DOMContentLoaded 和 load 的区别
DOMContentLoaded： 当形成完整的DOM树之后就会触发，而不理会图像、javascript文件，css文件或其他资源是否下载完毕
document.addEventListener('DOMContentLoaded', function(e) {
console.log("DOMContentLoaded快速")
} , false)load事件：当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源），就会触发window上面的load事件
window.addEventListener('load', function(e) {
console.log("load")
} , false)13 . hashchange事件
当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）
window.addEventListener('hashchange', function(e) {
console.log(e.oldURL +'新地址： '+ e.newURL)
} , false)14. 移动端事件
touchstart：当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发
a.addEventListener('touchstart', function(e) {
console.log('移动端手指点击事件 ')
} , false)触摸事件还包含下面三个用于跟踪触摸的属性：
touches：表示当前跟踪的触摸操作的touch对象的数组。
targetTouches：特定于事件目标的Touch对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。
touchmove：当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault() 可以阻止滚动。
var a = document.getElementById("dist");
a.addEventListener('touchmove', function(e) {
console.log('移动端手指移动事件 ')
} , false)touchend：手指移开触发
var a = document.getElementById("dist");
a.addEventListener('touchend', function(e) {
console.log('移动端手指移开时触发的事件 ')
} , false)touchcancel：当系统停止跟踪触摸时触发。关于此事件的确切触发时间，文档中没有明确说明。
如何解决 touchstart 事件与 click 事件的冲突： 通过判断浏览器是否支持 touchstart 事件来封装元素的点击事件，这样客户端会根据当前环境判定元素应该绑定的事件类型。
const Button = document.getElementById("targetButton")
const clickEvent = (function() {
if ('ontouchstart' in document.documentElement === true)
return 'touchstart';
else
return 'click';
})();
Button.addEventListener(clickEvent, e => {
console.log("things happened!")
})
