前言：
当前同学们对“html5手写板”大概比较关怀，咱们都需要知道一些“html5手写板”的相关资讯。那么小编在网摘上网罗了一些有关“html5手写板””的相关文章，希望你们能喜欢，朋友们快快来学习一下吧！事件太多了，我也严重怀疑这样的学习方式，特别是我觉得这本书完全是本工具书，并不是我们循徐渐进的掌握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 = new Array(); 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代码：
<html><head> <title>Related Elements Example</title> <style> #myDiv{ background-color:red; height: 100px; width: 100px; } </style></head><body> <div id="myDiv"></div> <script src="js/myjs.js"></script></body></html>在对应的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的时候，就会在控制台输出BODY。
6、鼠标按钮
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是否有值，如果没有则使用keyCode。
var EventUtil = { getCharCode:function (event) { if (typeof event.charCode == "number"){ return event.charCode; } else { return event.keyCode; } },};接下来就是给文本框增加keypress事件：
var textbox = document.getElementById("myText");EventUtil.addHandler(textbox,"keypress",function(event){ event = EventUtil.getEvent(event); alert(EventUtil.getCharCode(event));});3.DOM3
DOM3中不再包含charCode，而是key和char
key中存的不是ASCII码，而是字符，按下非字符时，存的是相应键的名。
char与key相同，但按下非字符键时为null。
4.DOM3中新增一个textInput事件，用来替代keypress，不过有区分，任何可获得焦点的对象都可以有keypress事件，但只有可编辑区域才能触发textInput事件。并且只有按下可以输入的字符时才会触发textInput。event的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事件。
<! DOCTYPE html><html> <head> <title>Node Removal Events Example</title> </head> <body> <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body></html>
在这个例子中，我们假设要移除<ul>元素。此时，就会依次触发以下事件。
(1) 在<ul>元素上触发DOMNodeRemoved 事件。relatedNode 属性等于document.body。
(2) 在<ul>元素上触发DOMNodeRemovedFromDocument 事件。
(3) 在身为<ul>元素子节点的每个<li>元素及文本节点上触发DOMNodeRemovedFromDocument
事件。
(4) 在document.body 上触发DOMSubtreeModified 事件，因为<ul>元素是document.body
的直接子元素。
2、插入节点
在使用appendChild()、replaceChild()、insertBefore()方法向DOM中插入节点时，会触发DOMNodeInserted事件。
接着在新插入的节点上触发DOMNodeInsertedIntoDocument事件。
最后触发DOMSubtreeModified事件。
13.4.7 HTML5事件1、contextmenu
下面代码演示了如何定义上下文菜单，以及取消缺省上下文菜单。
<!DOCTYPE html><html> <head> <title>ContextMenu Event Example</title> </head> <body> <div id="myDiv">Right click or Ctrl+click me to get a custom context menu.Click anywhere else to get the default context menu.</div> <ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver"> <li><a href=";>Nicholas’ site</a></li> <li><a href=";>Wrox site</a></li> <li><a href=";>Yahoo!</a></li> </ul> <script src="js/myjs.js"></script> </body></html>
下面为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 = "I'm 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" in window);var isSupported = ("onhashchange" in window) && (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 当任何一个手指从屏幕上移开时触发
标签： #html5手写板 #js滑动事件会触发所有的 #常用的js事件 #js元素滚动事件 #js常用的五个事件有哪些
