JS事件机制

1.事件冒泡：从事件源开始依次向上触发事件 – 微软

2.事件捕获：从document开始依次向下到事件源触发事件 – 网景

3.标准化：DOM2

4.事件三大要素：事件源、事件监听函数、Event对象

二、DOM0级事件

绑定事件
1.侵入式

<input type="button" onclick="clicks()">

2.分离式

document.getElementById("box").onclick = function(){}

解绑事件

document.getElementById("box").onclick = null

注意

1.相同的事件只能绑定一次

2.事件大多默认为冒泡

三、DOM2级事件

绑定事件

element.addEventListener(event,function,true/false);
event：事件名，不需要"on"
function：事件处理函数
true：事件捕获
false：默认值，事件冒泡

移除事件

element.removeEventListener(event,function,true/false)

注意

1.相同的事件可以多次绑定

2.removeEventListener()不能移除匿名处理函数

3.removeEventListener()只能移除由addEventListener()绑定的事件

四、DOM3级事件

1.新增了事件类型：mousewheel，scroll…

2.自定义事件

五、阻止事件冒泡或默认行为

1.Event对象：事件的状态，保存的是事件相关信息 – 作为事件处理函数的第一个参数

2.event.stopPropagation()：阻止事件冒泡或捕获

3.event.preventDefault()：阻止元素的默认行为

六、兼容

1.event.attachEvent()：IE8-,Opera7-浏览器不支持addEventListener()时的替代方式

2.event.detachEvent()：IE8-,Opera7-浏览器不支持removeEventListener()时的替代方式

3.event.cancelBubble = true：IE下阻止事件冒泡或捕获 – chrome,firefox都支持

4.event.returnValue = false：IE低版本下阻止默认行为 – chrome,firefox都支持

七、移动端事件

1.touchstart：开始触摸

2.touchmove：手指移动

3.touchend：触摸结束

4.touchcancel：触摸被中断

注意：移动端的click会延迟~300ms

八、其他

1.滚轮事件：wheel：标准写法

var scroll = "onwheel" in document ? "wheel":  //各大厂商最新版的浏览器支持
			 "onmousewheel" in document ? "mousewheel" : //webkit内核浏览器和IE浏览器一定支持
			 "DOMMouseScroll"; //低版本的FF支持

2.swiper.js：滚动插件