DOM2级事件
事件的几种类型:对象事件,鼠标事件,键盘事件,表单事件,W3CDOM事件,以及针对浏览器的事件。对象事件:window对象,也是javascript对象。load 适用于window对象,页面需要的所有图像文件都载入完成才触发。unload 适用于window对象,页面被关闭之前捕获最后一瞬间的信息。error 适用于window对象和图像对象。图像一旦设置src属性,就开始载入图像。abort 在图像完全载入之前,因浏览器停止载入页面导致图像载入失败时触发。通常发生在单击浏览器停止按钮。resizescroll 适用于具有overflow:auto;样式的元素。鼠标移动事件mousemove 由鼠标下方的对象触发,鼠标按下时触发。moverovermouseout鼠标单击事件mousedown 不一定和mouseup成对出现,取决于触发时鼠标下方几个元素。mouseup 不一定和mousedown成对出现,取决于触发时鼠标下方几个元素。 click 鼠标必须保持不动dbclick键盘事件 只适用于document对象keydownkeyupkeypress 紧随着keyup之后触发,表示一个键被按过了。表单事件submitresetblur 适用于<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 DOMNodeRemovedDOMNodeRemovedFromDocumentNodeInsertedIntoDocumentDOMAttrModifiedDOMCharacterDataModified事件流事件流的传递取决于文档结构,和视觉位置无关。不可能同时单击两个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事件模型addEventListenerremoveEventListenr对某事件指定多个侦听器,并不能保证执行顺序,要想保证执行顺序,只能注册一个侦听器,然后在其内部按期望的顺序调用多个函数。手工触发事件 需要组合document.createEvent()和dispatchEvent()来手工触发。 示例:var event = document.createEvent('MouseEvents');event.initMouseEvent('click', true, true, window, 0,.....);node.dispachEvent(event);load事件的替代方案 P1601、如果浏览器存在addEventListener()方法,则使用DOMContentLoaded事件。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 包含事件名称。如clickeventPhase 当前事件侦听器所处于事件流的哪个阶段。整数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 相对于浏览器窗口clientYscreenX 相对于桌面屏幕screenYrelatedTarget MouseEvent对象拥有,该属性值一般情况下,为null。但在mouseover事件中,引用鼠标离开的前一个对象。在mouseout事件中,引用鼠标之前进入的那个对象。各浏览器兼容问题访问事件的目标元素(target)IE中,没有提供target和currentTarget属性,但提供了一个srcElement属性。Safari中,文本节点会代替包含它的元素成为目标对象。 判断条件:node.nodeType === 3确定单击了那个鼠标按键(button)MSIE0 没有按键按下1 左键2 右键3 同时按下左右键4 中键5 同时按下左中键6 同时按下右中键7 同时按下左中右键处理鼠标在文档中的位置Safari pageYW3C document.documentElement.scrollTop + e.clientYIE document.body.scrollTop + e.clientY访问键盘命令event.keyCode enter 13 左上右下(37,38,39,40) shift 16 ctrl 17将unicode值转换普通字符:String.formCharCode(event.keyCode);