JavaScript中事件的兼容性写法

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!")
})