JavaScript中的事件模型

JS中的事件

1、鼠标事件

onclick ondbclick onmouseover onmouseout

2、HTML事件

onload onunload onsubmit onresize onfocus onchange onscroll

3、键盘事件

onkeydown：键盘按下时触发
onkeypress:键盘按下并抬起的瞬间触发
onkeyup:键盘抬起时触发

【注意事项】

① 执行顺序：keydown--keypress--keyup
② keypress只能捕获数字、字母、符号键，不能捕获功能键；
③ 长按时循环执行：keydown--keypress
④ 有keydown,不一定有keyup,当长按时焦点失去时，不再触发keyup.
⑤ keypress区分字母大小写，keydown/keyup不区分大小写

4、事件因子

当触发一个事件时，该事件将向事件所调用的函数中，默认传入一个参数，这个参数就是事件因子，包含了事件的各种详细信息。

1 document.onkeydown=function(e){ 
2   console.log(e);
3 }

5、如何确定键盘按键

① 在触发函数中，接收事件因子e

e = e || window.event;

② 可以使用 e.key直接取到按下的按键字符（不推荐）
③ 可以使用keyCode/which/charCode取到按键的ASCII码值：

1 var code=e.keyCode || e.which || e.charCode;
2  //(兼容各种浏览器的写法) 
3 document.onkeydown=function(e){
4    e = e || window.event; 
5    var code=e.keyCode || e.which || e.charCode;
6    console.log(e); 
7 }

DOM0事件模型

1.内联模型绑定 (行内绑定)

将函数名直接作为HTML标签中事件属性的属性值

 <button onclick="func()">内联模型绑定</button>

缺点：不符合w3c中关于内容与行为分离的基本规范

2.脚本模型（动态绑定）

通过在js中选中某个节点，然后给节点添加onclick属性

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

优点：符合w3c中内容与行为分离的基本规范，实现html与js的分离

缺点：同一个节点，只能添加一次同类型事件。如果添加多次，最后一个生效。

3.DOM0共有的缺点：

通过DOM0绑定的事件，一旦绑定，无法取消

DOM2事件模型

1.添加DOM2事件绑定

① IE8之前，使用.attachEvent("onclick",函数)；
② IE8之后，使用.addEventListener("click",函数,true/false);
参数三：false（默认）表示事件冒泡，传入true表示事件捕获
③ 兼容所有浏览器的处理方式

1 var btn = document.getElementById("btn2");
2 if(btn.attachEvent) {
3       btn.attachEvent("onclick", func1);
4     } else {
5       btn.addEventListener("click", func1);
6 }

2.DOM2的优点：

① 同一个节点，可以使用DOM2绑定多个同类型事件
② 使用DOM2绑定的事件，有专门的函数取消

3.DOM2取消事件绑定：

① 使用attachEvent绑定，用detachEvent("onclick",func1);取消
② 使用addEventListenner绑定，用removeEventListener("click",func1);取消

1 document.getElementById("btn3").onclick=function() {
2 if(btn.detachEvent) {
3        btn.detachEvent("onclick", func1);
4     } else {
5        btn.removeEventListener("click", func1);
6     }
7     alert("取消事件绑定");
8 }

注意：如果是DOM2绑定的事件需要取消，则绑定事时，回掉函数必须是函数名，而不能是匿名函数，因为取消事件时，，取消传入函数名进行绑定

js中的事件流模型

1.事件冒泡：

当触发一个节点的事件时，会从当前节点开始，依次触发其祖先节点的同类型事件，直到DOM根节点。

2.事件捕获

当触发一个节点的事件时，会从DOM根节点开始，依次触发其祖先节点的同类型事件，知道当前节点自身。

3.什么时候事件冒泡？事件捕获？
①当使用addEventListener绑定事件，第三个参数设为true时表示事件捕获
②除此之外的所有事件均为事件冒泡
4.阻止事件冒泡
①IE10之前，使用e.cancelBubble = true;
②IE10之后，使用 e.stopPropagation();

1 function myParagraphEventHandler(e) {
2     e = e || window.event;
3     if (e.stopPropagation) {
4          e.stopPropagation(); //IE10之后 
5     } else {
6          e.cancelBubble = true; //IE10之前
7     }
8 }

5.阻止默认事件
①IE10之前：e.returnValue = false;
②IE10之后：e.stopPropagation();

1 function eventHandler(e) {
2   e = e || window.event;
3   // 防止默认行为 
4   if (e.preventDefault) {
5        e.preventDefault(); //IE10之外 
6    }else {
7       e.returnValue = false; //IE10之前 
8    }
9 }