2015-03-12——简析DOM2级事件

DOM2级事件

事件的几种类型:
对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件。

对象事件:
window对象,也是javascript对象。
load  适用于window对象,页面需要的所有图像文件都载入完成才触发。
unload  适用于window对象,页面被关闭之前捕获最后一瞬间的信息。
error  适用于window对象和图像对象。图像一旦设置src属性,就开始载入图像。
abort  在图像完全载入之前,因浏览器停止载入页面导致图像载入失败时触发。通常发生在单击浏览器停止按钮。
resize
scroll     适用于具有overflow:auto;样式的元素。

鼠标移动事件
mousemove  由鼠标下方的对象触发,鼠标按下时触发。
moverover
mouseout

鼠标单击事件
mousedown  不一定和mouseup成对出现,取决于触发时鼠标下方几个元素。
mouseup  不一定和mousedown成对出现,取决于触发时鼠标下方几个元素。   
click  鼠标必须保持不动
dbclick

键盘事件
只适用于document对象
keydown
keyup
keypress  紧随着keyup之后触发,表示一个键被按过了。

表单事件
submit
reset
blur  适用于<label><input><select><textarea><button>等表单元素。
focus  适用于<label><input><select><textarea><button>等表单元素。
change  适用于<input><select><textarea>,会在focus事件发生后,当用户在focus和blur事件之间修改元素的值时触发。

W3C DOM事件
三个用户界面事件:
DOMFocusIn  适用于任何元素,不仅仅是表单元素。
DOMFocusOut  适用于任何元素,不仅仅是表单元素。
DOMActive  鼠标或按键激活。
七种变化(Mutation)事件,修改DOM结构时触发。
DOMSubtreeModified  触发于最低公共节点上。
DOMNodeInserted  
DOMNodeRemoved
DOMNodeRemovedFromDocument
NodeInsertedIntoDocument
DOMAttrModified
DOMCharacterDataModified

事件流
事件流的传递取决于文档结构,和视觉位置无关。不可能同时单击两个DOM结构上无嵌套关系的元素。
IE  事件冒泡
Netscape  事件捕获
W3C  默认事件冒泡

阻止冒泡:
W3C  e.stopPropagation();
IE  e.cancelBubble = true;

取消默认动作:  
注意:有一些事件不能被取消,如:mousemove,load,unload,select,change...
W3C  e.preventDefault();
IE  e.returnValue = false;

传统的事件模型
最技术上缺陷:事件侦听器只能是一个单独的函数,且无法指定捕获阶段还是冒泡阶段。
移除侦听器  示例:anchor.onclick = null;
手工触发事件  示例:anchor.onclick();

MSIE的事件模型
attachEvent(‘on‘ + type, callback);
detachEvent(‘on‘ + type, callback);
可以对某事件指定多个侦听器,但只能冒泡阶段触发。
手工触发事件  示例:node.fireEvent("on" + type);
关于侦听器中的this关键字:
与传统的模型不同,MSIE的模型只是引用而非复制事件侦听器,因此this引用的将是原始的函数(通常位于window对象中),而不是附加到注册事件侦听器的那个对象。

W3C DOM2事件模型
addEventListener
removeEventListenr
对某事件指定多个侦听器,并不能保证执行顺序,要想保证执行顺序,只能注册一个侦听器,然后在其内部按期望的顺序调用多个函数。
手工触发事件  需要组合document.createEvent()和dispatchEvent()来手工触发。
示例:
var event = document.createEvent(‘MouseEvents‘);
event.initMouseEvent(‘click‘, true, true, window, 0,.....);
node.dispathEvent(event);

load事件的替代方案  P160
1、如果浏览器存在addEventListener()方法,则使用DOMContentLoader事件。
2、对于Safari,使用用setInterval()定期检查document.readyState === ‘loaded or complete‘。
3、对于IE,写入一个script标签,添加defer属性,使用script对象的onreadystatechange属性,进行readyState === ‘complete‘检查。

关于事件侦听器
不能再侦听器中指定自定义参数。(正确与否,取决于浏览器)
W3C模型中,事件侦听器会取得一个表示事件自身的参数。
MSIE模型中,事件侦听器不会取得任何参数。

Event对象 继承

DOM2事件规范中的Event对象
事件对象包含着用于控制事件流和目标对象的方法和属性。
Event对象属性:
bubbles  表示事件是否是冒泡阶段的事件。
cancelable  表示事件是否具有可以被取消的默认动作。
currentTarget  表示当前正在处理的事件侦听器所在的事件流中的DOM元素。
target  目标对象
timestamp  用来确定自创建事件的纪元时间算起,经过的毫秒数。
type  包含事件名称。如click
eventPhase  当前事件侦听器所处于事件流的哪个阶段。整数1-3表示,也可以使用Event常量CAPTURING_PHASE,AT_TARGET,BUBBLING_PHASE表示。
Event对象方法:
document.createEvent(‘Event‘);
initEvent(eventType, canBubble, cancelable);
preventDefault();
stopPropagation();

DOM2事件规范中的MouseEvent对象
对于鼠标事件,传递到事件侦听器中的事件对象都是MouseEvent对象。
MouseEvent对象属性:
altKey  鼠标事件发生时,是否按住了alt键。
ctrlKey  鼠标事件发生时,是否按住了ctrl键。
shiftKey  鼠标事件发生时,是否按住了shift键。
button  哪个鼠标键被按下的一个整数值,左中右(0,1,2)。MouseEvent常量,MouseEvent.BUTTON_LEFT...
clientX  相对于浏览器窗口
clientY
screenX  相对于桌面屏幕
screenY
relatedTarget  MouseEvent对象拥有,该属性值一般情况下,为null。但在mouseover事件中,引用鼠标离开的前一个对象。在mouseout事件中,引用鼠标之前进入的那个对象。

各浏览器兼容问题

访问事件的目标元素(target)
IE中,没有提供target和currentTarget属性,但提供了一个srcElement属性。
Safari中,文本节点会代替包含它的元素成为目标对象。 判断条件:node.nodeType === 3

确定单击了那个鼠标按键(button)
MSIE
0  没有按键按下
1  左键
2  右键
3  同时按下左右键
4  中键
5  同时按下左中键
6  同时按下右中键
7  同时按下左中右键

处理鼠标在文档中的位置
Safari pageY
W3C  document.documentElement.scrollTop +  e.clientY
IE  document.body.scrollTop +  e.clientY

访问键盘命令
event.keyCode  enter 13   左上右下(37,38,39,40)  shift 16   ctrl 17
将unicode值转换普通字符:String.formCharCode(event.keyCode);

时间: 2024-10-14 09:58:17

2015-03-12——简析DOM2级事件的相关文章

2015-03-12——简析DOM2级样式

CSSStyleSheet对象  表示某种类型的样式表CSSStyleRule对象  样式表中的每条规则 获得文档中的所有样式表document.styleSheets CSSStyleSheet对象属性type  text/cssdisabled  表示样式表是否应用于当前文档.应用/禁用,false/truehref  样式表相对于当前文档所在的URLtitle  可以用来分组样式表的标签media  表示目标设备类型,screen或print  下一级属性,w3c  mediaText 

关于DOM2级事件的事件捕获和事件冒泡

DOM2级事件中addEventListener的执行机制,多个addEventListener同时添加时的执行先后规律: W3C的DOM事件触发分为三个阶段:①.事件捕获阶段,即由最顶层元素(一般是从window元素开始,有的浏览器是从document开始,至于其中的差别我稍后会更新)开始,逐次进入dom内部,最后到达目标元素,依次执行绑定在其上的事件②.处于目标阶段,检测机制到达目标元素,按事件注册顺序执行绑定在目标元素上的事件.③.事件冒泡阶段,从目标元素出发,向外层元素冒泡,最后到达顶层

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

事件对象——兼容处理 1 /* 2 * 功能: 事件对象兼容 3 * 参数: 表示常规浏览器的事件对象e 4 */ 5 function getEvent(e) { 6 7 // 如果存在e存在,直接返回,否则返回window.event 8 return e || window.event; 9 } 获取事件所对应的目标——兼容处理 1 /* 2 3 * 功能: 获取事件所对应的目标 4 5 * 参数: 表示常规浏览器的事件对象e 6 7 */ 8 9 function getTargetBy

IE中DOM0级事件处理程序跟DOM2级事件处理程序中作用域(this)的区别

一:在布局中直接添加事件处理 <div id="div1" onclick="fOne();"></div> <script> var oDiv1 = document.getElementById("div1"); function fOne(){ alert(this===window);//true } </script> 弹出true,是因为在布局中调用的时候省略了window,全面的应该是

JS:Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序

1.HTML事件处理程序 某个元素支持的某种事件,可以通过一个与相应事件处理程序同名的HTML特性指定.这个特性的值应该是能够执行的JS代码.例如:按钮单击是要执行一些js代码,可以像下面: <input type="button" value="click me" onclick="showMessage()" /> 在js中就可以像下面一样处理: <script> function showMessage(){ ale

DOM0、DOM2级事件

JavaScript DOM0.DOM2级事件 1.DOM0级事件:on+事件类型 在html行内直接绑定,也就是通过行内js绑定的例如<span onclick="alert('1')">第一项</span> 在js中绑定例如://<span onclick="alert('2')">第一项</span> var Ospan=document.getElementsByTagName('span')[0];Ospan

Dom0级事件和Dom2级事件

1.Dom0级事件: 注册obj.onclick=function () {}; (1.使用简单,2.跨浏览器): 删除obj.onclick=null; 2.Dom2级事件(比0级优点:多个处理函数不会被覆盖): 成员 -> addEventListener注册事件   removeEventListener移出事件: 三个参数 -> 1事件名(都不能带on),2处理函数,3布尔值涉及嵌套元素的事件触发顺序(true按捕获流的顺序调用,false按事件冒泡流的顺序调用): (IE下用atta

【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件

DOM0级事件处理程序: 通过将元素的事件处理程序属性(如onclick)的值设置为一个函数来指定事件处理程序的方法称为DOM0级方法,它被认为是元素的方法,这时候的事件处理程序是在元素的作用域中运行(也就是this引用当前元素): 1 var btn = document.getElementById('myBtn'); 2 btn.onclick = function(){ 3 alert(this.id); 4 }; DOM2级事件处理程序: 通过addEventListener()方法和

事件流程以及dom2级事件绑定

事件流程分为三个阶段:捕获阶段.目标阶段.冒泡阶段. 捕获阶段:事件从最顶层元素开始执行,一层层往下,直到精确元素. 目标阶段:事件在精确元素上执行. 冒泡阶段:事件从精确元素开始执行,一层层往上,直到顶层元素(注:高级浏览器的顶层元素是window,ie8以下的浏览器顶层元素是document)  DOM2级事件绑定方式   高级浏览器绑定方式: 元素.addEventListener(type, handler, boolean);             //绑定 type 事件类型字符串