javascript自学记录：各类事件（现代javascript教程）

 

事件太多了，我也严重怀疑这样的学习方式，特别是我觉得这本书完全是本工具书，并不是我们循徐渐进的掌握js知识的好书，我还是认为任务推动型的讲解是让人更容易掌握的方式。

13.4.2 焦点事件FocusoutFocusinblur 不支持冒泡DOMFocusout 支持冒泡，但DOM3时舍弃Focus 不支持冒泡DOMFocusin 支持冒泡，但DOM3时舍弃13.4.3 鼠标与滚轮事件

clickdblclickmousedownmouseentermouseleavemousemovemouseoutmouseovermouseup1、客户区坐标位置x与y坐标的信息存放在clientX和clientY中：

window.onclick = function (envet) {     alert(event.clientX + "," + envet.clientY); };2、页面坐标页面坐标是基于网页的原始0，0坐标计算机位置，无论是否有滚动，都不会影响。

而第1点中的客户区坐标则不同，如果有滚动，那还是以左上角为0，0以pageX和pageY来作为页面坐标的值3、屏幕坐标以显示器左上角为原点，以screenX和screenY属值存储坐标值4、修改键（配合鼠标使用的功能键）。

window.onclick = function (envet) {     var keys = newArray();     if (event.shiftKey){         keys.push(

"按了shift键");     }     if (envet.ctrlKey){         keys.push("按了ctrl键");     }     if (envet.altKey){         keys.push(

"按了alt键");     }     alert(keys.join(",")) };5、相关元素mouseover和mouseout事件发生时，涉及到的元素可以通过event.relatedTarget属性得到相关信息。

我们新写了一些HTML代码：Related Elements Example#myDiv{             background-color

:red;             height: 100px;             width: 100px;         }    

"myDiv">在对应的js文件中有以下代码：var div = document.getElementById(

"myDiv"); div.onmouseover = function (event) {     console.log(event.relatedTarget.nodeName); }; div.onmouseout =

function (event) {     console.log(event.relatedTarget.nodeName); };当移进移出div的时候，就会在控制台输出BODY6、鼠标按钮 event.button的值有0，1，2，分别代表主按钮，中间按钮，次按钮。

7、更多的信息altLeftctrlLeftoffsetXoffsetYshiftLeft13.4.4 键盘与文本事件keydown 按下任意键时触发keypress 按下字符键时触发keyup 释放键盘上的键时触发

textInput 在文本插入文本框之前会触发按字符键触发顺序：keydown->keypress->文本出现->keyup如果按住一个键不放，会重复触发keydown->keypress直到松开键为止。

非字符键触发顺序：keydown->keyup，如果按住不放，则会重复keydown事件1、键码keydown和keyup事件时，event对象的keyCode属性会包含一个ASCII码2、字符编码部分浏览器支持charCode属性，值为ASCII码，这时keyCode=0。

跨浏览器需要检测charCode是否有值，如果没有则使用keyCodevar EventUtil = {     getCharCode:function (event) {         if (typeof

event.charCode == "number"){             returnevent.charCode;         } else {             returnevent

.keyCode;         }     }, };接下来就是给文本框增加keypress事件：var textbox = document.getElementById("myText"); EventUtil.addHandler(textbox,

"keypress",function(event){     event = EventUtil.getEvent(event);     alert(EventUtil.getCharCode(event

)); });3.DOM3DOM3中不再包含charCode，而是key和charkey中存的不是ASCII码，而是字符，按下非字符时，存的是相应键的名char与key相同，但按下非字符键时为null4.DOM3中新增一个textInput事件，用来替代keypress，不过有区分，任何可获得焦点的对象都可以有keypress事件，但只有可编辑区域才能触发textInput事件。

并且只有按下可以输入的字符时才会触发textInputevent的data属性中是按下的字符var textbox = document.getElementById("myInput"); EventUtil.addHandler(textbox,

"textInput",function (event) {     event = EventUtil.getEvent(event);     console.log(event.data); });

这样在input中输入字符时，会在控制台显示按下的键event还有一个inputMethod属性，代表字符是如何被输入到文本框中的 0，表示浏览器不确定是怎么输入的 1，表示是使用键盘输入的 2，表示文本是粘贴进来的。

3，表示文本是拖放进来的 4，表示文本是使用IME 输入的 5，表示文本是通过在表单中选择某一项输入的 6，表示文本是通过手写输入的（比如使用手写笔） 7，表示文本是通过语音输入的 8，表示文本是通过几种方法组合输入的。

9，表示文本是通过脚本输入的使用这个属性可以确定文本是如何输入到控件中的，从而可以验证其有效性5.设备中的键盘事件13.4.5 复合事件是DOM3中新添加的一类事件，用于处理IME输入序列compositionstart IME的文本复合系统打开时触发，表示要开始输入了。

compositionupdate 在向输入字段中插入新字符时触发compositionend 在IME的文本复合系统关闭时触发，表示返回正常键盘输入状态这3个事件有一个data属性，在不同事件中包含的内容不同：。

compositionstart 正在编辑的文本compositionupdate 正插入的新字符compositionend 此次输入中的所有字符 13.4.6 变动事件DOMSubtreeModified DOM结构中发生变化时触发

DOMNodeInserted 一个节点作为子节点插入到另一个节点时触发DOMNodeRemoved 在节点从其父节点中被移除时触发DOMNodeInsertedIntoDocument 在一个节点被直接插入文档或通过子树间接插入文档之后触发

DOMNodeRemovedFromDocument 在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发DOMAttrModified 在特性被修改之后触发DOMCharacterDataModified 在文本节点的值发生变化时触发。

使用以下代码可以检测浏览器是否支持变动事件：var isSupported = document.implementation.hasFeature("MutationEvents","2.0");1、删除节点

使用removeChild()和replaceChild()方法删除节点时，会触发DOMNodeRemoved事件如果被移除的节点包含有子节点，那么所有子节点与其相继触发DOMNodeRemovedFromDocument事件。

Node Removal Events ExampleItem 1

Item 2Item 3在这个例子中，我们假设要移除元素此时，就会依次触发以下事件(1) 在元素上触发DOMNodeRemoved 事件。

relatedNode 属性等于document.body(2) 在元素上触发DOMNodeRemovedFromDocument 事件(3) 在身为元素子节点的每个元素及文本节点上触发。

DOMNodeRemovedFromDocument事件(4) 在document.body 上触发DOMSubtreeModified 事件，因为元素是document.body的直接子元素2、插入节点

在使用appendChild()、replaceChild()、insertBefore()方法向DOM中插入节点时，会触发DOMNodeInserted事件接着在新插入的节点上触发DOMNodeInsertedIntoDocument事件。

最后触发DOMSubtreeModified事件13.4.7 HTML5事件1、contextmenu下面代码演示了如何定义上下文菜单，以及取消缺省上下文菜单<

head>ContextMenu Event ExampleRight click or Ctrl+click me to get a custom context menu.Click anywhere else to get the default context menu.

>Nicholas’ siteWrox site

>Yahoo!下面为js代码：EventUtil.addHandler(window

, "load", function(event){     var div = document.getElementById("myDiv");     EventUtil.addHandler(div,

"contextmenu", function(event){         event = EventUtil.getEvent(event);         EventUtil.preventDefault(event);    

// 取消默认上下文菜单var menu = document.getElementById("myMenu");         menu.style.left = event.clientX + "px"

;         menu.style.top = event.clientY + "px";         menu.style.visibility = "visible";     });     EventUtil.addHandler(

document, "click", function(event){         document.getElementById("myMenu").style.visibility = "hidden"

;     }); });2、beforeunload在unload之前发生，意在告诉用户页面将要卸载，是否继续EventUtil.addHandler(window, "beforeunload", function(

event){    event = EventUtil.getEvent(event);    var message = "Im really going to miss you if you go."

;    event.returnValue = message;    return message; });需要为event.returnValue属性设置提示文本，最后还要return 提示文本3、DOMContentLoaded

不同于load，本事件只在DOM树形成后就触发，而load则是会连图像、javascript文件、CSS文件或其他资源加载完而发生4、readystatechange事件节点有readyState属性，值有以下几个：。

uninitialized（未初始化）loading(正在加载)loaded(加载完毕)interactive(交互)complete(完成)5、pageshow和pagehide事件pageshow会在load事件触发后触发，如果是bfcache中的页面，则会在页面状态恢复的那一刻触发。

需要将事件添加到window上(function(){     var showCount = 0;     EventUtil.addHandler(window, "load", function()

{         alert("Load fired");     });     EventUtil.addHandler(window, "pageshow", function(){         showCount++;         alert(

"Show has been fired " + showCount + " times.");     }); })();event有一个persisted属性，如果页面被保存到了bfcache中，则值为true。

pagehide事件发生在unload之前，也是需要添加到window对象上6、hashchange事件URL的参数列表发生变化时的事件该事件需要指定给window，event对象有oldURL和newURL两个属性。

EventUtil.addHandler(window, "hashchange", function(event){     alert("Old URL: " + event.oldURL + "\nNew URL: "

+ event.newURL); });以下代码可以检测浏览器是否支持事件：var isSupported = ("onhashchange"inwindow); var isSupported = (

"onhashchange"inwindow) && (document.documentMode === undefined || document.documentMode > 7);13.4.8 设备事件

1、orientationchange苹果Safari浏览器中有orientationchange事件，不同的设备方向时window.orientation属性会有不同值EventUtil.addHandler(。

window, "load", function(event){     var div = document.getElementById("myDiv");     div.innerHTML =

"Current orientation is " + window.orientation;     EventUtil.addHandler(window, "orientationchange",

function(event){         div.innerHTML = "Current orientation is " + window.orientation;     }); });2、MozOrientation

当设备的加速计检测到设备方向改变时触发有x,y,z三个属性3、deviceorientation4、devicemotion13.4.9 触摸与手势事件1、触摸事件touchstart 当手指触摸屏幕时触发。

touchmove 当手指在屏幕上滑动时连续的触发touchend 当手指从屏幕上移开时触发touchcancel 当系统停止跟踪触摸时触发常用属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和metaKey

2、手抛事件gesturestart 当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发gesturechange 当触摸屏幕的任何一个手指的位置发生变化时触发gestureend 当任何一个手指从屏幕上移开时触发。