Javascript学习之事件模型详解
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 }
来源：网络
以上是关于Javascript学习之事件模型详解的主要内容，如果未能解决你的问题，请参考以下文章