事件类型

鼠标事件

键盘事件

框架事件 onerror onresize onscroll等

表单事件事件 onblur onfocus等

剪贴板事件 oncopy oncut onpaste

打印事件 onafterprint onbeforeprint

拖动事件 ondrag ondragenter等

media事件 onplay onpause

动画事件 animationend

UI事件 load 、unload、error、select、resize、scroll

事件的三种模型

1、原始事件模型

原始事件模型中，事件发生后没有传播的概念，没有事件流。事件发生，立即处理。

监听函数只是元素的一个属性值，通过指定元素的属性值来绑定监听器。

1
2
HTML: <input id=”btn” onclick=”func()” />
js : document.getElementsById(‘btn’).onclick = func

优点是兼容性好。

缺点：

2、IE事件模型

IE是将event对象在处理函数中设为window的属性，一旦函数执行结束，便被置为null
了。

IE的事件模型只有两步，先执行元素的监听函数，然后事件沿着父节点一直冒泡到document。

3、DOM2事件模型

W3C制定的事件模型中，一次事件的发生包含三个过程：

注意：所有的事件类型都会经历事件捕获阶段，但是只有部分事件会经历事件冒泡阶段,例如
submit事件就不会被冒泡。为了最大程度兼容各种浏览器，一般都是将事件处理函程序添加到事件流的冒泡阶段。

绑定解除监听函数的方法：

addEventListener(“eventType”,”handler”,”true|false”);其中eventType指事件类型，注意
不要加‘on’前缀，与IE下不同。

第二个参数是处理函数，第三个参数是可选参数。

监听器的解除也类似：removeEventListener(“eventType”,”handler”, {});

兼容IE和现代浏览器的事件注册监听写法：

1
2
3
4
5
6
7
let a = document.getElementById('XXX');

if(a.attachEvent) {
    a.attachEvent('onclick', func);
} else { // IE9以上和主流浏览器
    a.addEventListener('click', func, {});
}

事件的捕获-冒泡机制

DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。

如果不想让事件向上冒泡，可以在监听函数中调用event.stopPropagation()来完成。

preventDefault可以用来取消事件的默认行为，比如点击a标签默认跳转链接，点击button默认提交。

stopPropagation用来取消事件进一步捕获或者冒泡。

options 可选: