Javascript学习之事件模型详解

事件模型是javascript中非常重要的知识点之一，本文和大家分享的主要是javascript中的这部分内容，希望通过分享，对大家学习javascript有所帮助。

　　JS中的事件

　　1、鼠标事件

　　onclick   ondbclick   onmouseover   onmouseout

　　2、HTML事件

　　onload   onunload   onsubmit   onresize  onfocus  onchange   onscroll

　　3、键盘事件

　　1. onkeydown：键盘按下时触发

　　2. onkeypress:键盘按下并抬起的瞬间触发

　　3. 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 }

 

来源：网络