事件类型
-
Web 浏览器中可能发生的事件有很多类型
- UI事件：当用户与界面上的元素交互时触发。
- 焦点事件：当元素获得或失去焦点时触发。
- 滚轮事件：当使用鼠标滚轮时触发。
- 文本事件：当在文档中输入文本时触发。
- 键盘事件：但用户通过键盘在页面上执行操作时触发。
- 合成事件：当为输入法编辑器输入字符时触发。
- 变动事件：当底层DOM结构发生变化时触发。
//事件处理程序
var EventUtil = {
addHandler: function(element, type, handler){
if (element.addEventListener){
element.addEventListener(type, handler, false);
} else if (element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function(event){
return event ? event : window.event;
},
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if (element.detachEvent){
element.detachEvent("on" + type, handler);
} else {
element["on" + type] = null;
}
}
};
1、UI事件
- UI 事件指的是那些不一定与用户操作有关的事件。
(1)load事件
- load在当页面完全加载后在window上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕时在<img>元素上面触发，或者当嵌入的内容加载完毕时在<object>元素上面触发。
//第一种定义onload 事件处理程序的方式
EventUtil.addHandler(window, "load", function(event){
alert("Loaded!");
});
<!--第二种指定onload 事件处理程序的方式-->
<!DOCTYPE html>
<html>
<head>
<title>Load Event Example</title>
</head>
<body onload="alert('Loaded!')">
</body>
</html>
(2)unload事件
- unload，当页面完全卸载后在window上面触发，当所有框架都卸载后在框架集上面触发，或者当嵌入的内容卸载完毕后在<object>元素上面触发。
- 只要用户从一个页面切换到另一个页面，就会发生unload事件。而利用这个事件最多的情况是清除引用，以避免内存泄漏。
EventUtil.addHandler(window, "unload", function(event){
alert("Unloaded");
});
<!DOCTYPE html>
<html>
<head>
<title>Unload Event Example</title>
</head>
<body onunload="alert('Unloaded!')">
</body>
</html>
(3)resize事件
- resize|当窗口或框架的大小变化时在window 或框架上面触发。
- 浏览器窗口最小化或最大化时也会触发resize 事件。
EventUtil.addHandler(window, "resize", function(event){
alert("Resized");
});
(4)scroll事件
- scroll，当用户滚动带滚动条的元素中的内容时，在该元素上面触发。<body>元素中包含所加载页面的滚动条。
EventUtil.addHandler(window, "scroll", function(event){
if (document.compatMode == "CSS1Compat"){
alert(document.documentElement.scrollTop);
} else {
alert(document.body.scrollTop);
}
});
(5)abort
- abort，在用户停止下载过程时，如果嵌入的内容没有加载完，则在<object>元素上面触发。
(6)error
- error，当发生JavaScript错误时在window上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发
(7)select
- select，当用户选择文本框（<input>或<texterea>）中的一或多个字符时触发。
2、焦点事件
-
焦点事件会在页面元素获得或失去焦点时触发，有以下6 个焦点事件。
- blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
- focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。
- focusin：在元素获得焦点时触发。这个事件与HTML 事件focus 等价，但它冒泡。
- focusout：在元素失去焦点时触发。这个事件是HTML 事件blur 的通用版本。
当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：
(1) focusout 在失去焦点的元素上触发；
(2) focusin 在获得焦点的元素上触发；
(3) blur 在失去焦点的元素上触发；
(4) DOMFocusOut 在失去焦点的元素上触发；
(5) focus 在获得焦点的元素上触发；
(6) DOMFocusIn 在获得焦点的元素上触发。
其中，blur、DOMFocusOut和focusout的事件目标是失去焦点的元素；而focus、DOMFocusIn和focusin 的事件目标是获得焦点的元素。要确定浏览器是否支持这些事件，可以使用如下代码：
var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");
3、鼠标与滚轮事件
- click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。
- dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。
- mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
- mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
- mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。
- mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
- mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。
- mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
- mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。
- 要检测浏览器是否支持上面的所有事件，可以使用以下代码：
var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")
- 鼠标事件中还有一类滚轮事件。而说是一类事件，其实就是一个mousewheel 事件。这个事件跟踪鼠标滚轮。
(1)客户区坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Client coordinates: " + event.clientX + "," + event.clientY);
});
(2)页面坐标位置
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Page coordinates: " + event.pageX + "," + event.pageY);
});
- IE8 及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var pageX = event.pageX,
pageY = event.pageY;
if (pageX === undefined){
pageX = event.clientX + (document.body.scrollLeft ||
document.documentElement.scrollLeft);
}
if (pageY === undefined){
pageY = event.clientY + (document.body.scrollTop ||
document.documentElement.scrollTop);
}
alert("Page coordinates: " + pageX + "," + pageY);
});
(3)屏幕坐标位置
- 通过screenX 和screenY属性可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});
(4)修改键
- 在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "click", function(event){
event = EventUtil.getEvent(event);
var keys = new Array();
if (event.shiftKey){
keys.push("shift");
}
if (event.ctrlKey){
keys.push("ctrl");
}
if (event.altKey){
keys.push("alt");
}
if (event.metaKey){
keys.push("meta");
}
alert("Keys: " + keys.join(","));
});
(5)相关元素
- 在发生mouseover 和mouserout 事件时，还会涉及更多的元素。
- 对mouseover 事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。
- 对mouseout 事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。
- DOM通过event 对象的relatedTarget 属性提供了相关元素的信息。
- IE8及之前版本不支持relatedTarget属性，但提供了保存着同样信息的不同属性。在mouseover 事件触发时，IE 的fromElement属性中保存了相关元素；在mouseout事件触发时，IE 的toElement 属性中保存着相关元素。
<!DOCTYPE html>
<html>
<head>
<title>Related Elements Example</title>
</head>
<body>
<div id="myDiv" style="background-color:red;">test</div>
</body>
</html>
var EventUtil = {
//省略了其他代码
getRelatedTarget: function(event){
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
},
//省略了其他代码
};
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mouseout", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var relatedTarget = EventUtil.getRelatedTarget(event);
alert("Moused out of " + target.tagName + " to " + relatedTarget.tagName);
});
(6)鼠标按钮
- DOM的button 属性可能有如下3 个值：
- 0 表示主鼠标按钮。
- 1 表示中间的鼠标按钮（鼠标滚轮按钮）。
- 2 表示次鼠标按钮。
- 在常规的设置中，主鼠标按钮就是鼠标左键，而次鼠标按钮就是鼠标右键。
- IE8 及之前版本也提供了button 属性，但这个属性的值与DOM的button属性有很大差异。
- 0：表示没有按下按钮。
- 1：表示按下了主鼠标按钮。
- 2：表示按下了次鼠标按钮。
- 3：表示同时按下了主、次鼠标按钮。
- 4：表示按下了中间的鼠标按钮。
- 5：表示同时按下了主鼠标按钮和中间的鼠标按钮。
- 6：表示同时按下了次鼠标按钮和中间的鼠标按钮。
- 7：表示同时按下了三个鼠标按钮。
var EventUtil = {
//省略了其他代码
getButton: function(event){
if (document.implementation.hasFeature("MouseEvents", "2.0")){
return event.button;
} else {
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
//省略了其他代码
};
var div = document.getElementById("myDiv");
EventUtil.addHandler(div, "mousedown", function(event){
event = EventUtil.getEvent(event);
alert(EventUtil.getButton(event));
});
(7)鼠标滚轮事件
- 与mousewheel 事件对应的event对象除包含鼠标事件的所有标准信息外，还包含一个特殊的wheelDelta 属性。
- 当用户向前滚动鼠标滚轮时，wheelDelta是120的倍数；当用户向后滚动鼠标滚轮时，wheelDelta 是-120 的倍数。
EventUtil.addHandler(document, "mousewheel", function(event){
event = EventUtil.getEvent(event);
alert(event.wheelDelta);
});
(8)触摸设备
- 不支持dblclick事件，双击浏览器窗口放大画面。
- 轻击可单击元素会触发mousemove 事件。
- mousemove 事件也会触发mouseover 和mouseout 事件。
- 两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel 和scroll 事件。
4、键盘与文本事件
- keydown: 当用户按下键盘上的任意键时触发，若按住不放，会重复触发。
- keypress:当用户按下键盘上的字符键时触发，若按住不放，会重复触发。按下ESC键也会触发这个事件。
- keyup：当用户释放键盘上的键时触发。
(1)键码
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keyup", function(event){
event = EventUtil.getEvent(event);
alert(event.keyCode);
});
(2)字符编码
- IE9、Firefox、Chrome 和Safari 的event 对象都支持一个charCode 属性，这个属性只有在发生keypress事件时才包含值，而且这个值是按下的那个键所代表字符的ASCII 编码。此时的keyCode通常等于0 或者也可能等于所按键的键码。
//跨浏览器取得字符编码
var EventUtil = {
//省略的代码
getCharCode: function(event){
if (typeof event.charCode == "number"){
return event.charCode;
} else {
return event.keyCode;
}
},
//省略的代码
};
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的值就是相应的文本字符（如“k”或“M”）；在按下非字符键时， key 的值是相应键的名（如“Shift”或“Down”）。
- char 属性在按下字符键时的行为与key 相同，但在按下非字符键时值为null。
- IE9 支持key 属性，但不支持char 属性。Safari 5 和Chrome 支持名为keyIdentifier 的属性，在按下非字符键（例如Shift）的情况下与key的值相同。
- 对于字符键，keyIdentifier 返回一个格式类似“U+0000”的字符串，表示Unicode 值。
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var identifier = event.key || event.keyIdentifier;
if (identifier){
alert(identifi er);
}
});
- 由于存在跨浏览器问题，因此不推荐使用key、keyIdentifier 或char。
(4)textInput事件
- 当用户在可编辑区域中输入字符时，就会触发textInput事件。
- 这个用于替代keypress 的textInput 事件的行为稍有不同。
- 任何可以获得焦点的元素都可以触发keypress事件，但只有可编辑区域才能触发textInput事件。
- textInput 事件只会在用户按下能够输入实际字符的键时才会被触发，而keypress事件则在按下那些能够影响文本显示的键时也会触发。
- 由于textInput 事件主要考虑的是字符，因此它的event对象中还包含一个data属性，这个属性的值就是用户输入的字符（而非字符编码）。
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "textInput", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
5、复合事件
- 复合事件，用于处理IME 的输入序列。
- IME（Input Method Editor，输入法编辑器）可以让用户输入在物理键盘上找不到的字符。
- 复合事件就是针对检测和处理这种输入而设计的。有以下三种复合事件。
- compositionstart：在IME 的文本复合系统打开时触发，表示要开始输入了。
- compositionupdate：在向输入字段中插入新字符时触发。
- compositionend：在IME 的文本复合系统关闭时触发，表示返回正常键盘输入状态。
- 在触发复合事件时，目标是接收文本的输入字段。但它比文本事件的事件对象多一个属性data，其中包含以下几个值中的一个。
- 如果在compositionstart事件发生时访问，包含正在编辑的文本；
- 如果在compositionupdate 事件发生时访问，包含正插入的新字符；
- 如果在compositionend 事件发生时访问，包含此次输入会话中插入的所有字符。
var textbox = document.getElementById("myText");
EventUtil.addHandler(textbox, "compositionstart", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
EventUtil.addHandler(textbox, "compositionupdate", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
EventUtil.addHandler(textbox, "compositionend", function(event){
event = EventUtil.getEvent(event);
alert(event.data);
});
- 要确定浏览器是否支持复合事件，可以使用以下代码
var isSupported = document.implementation.hasFeature("CompositionEvent", "3.0");
6、变动事件
- DOMSubtreeModified：在DOM 结构中发生任何变化时触发。这个事件在其他任何事件触发
后都会触发。 - DOMNodeInserted：在一个节点作为子节点被插入到另一个节点中时触发。
- DOMNodeRemoved：在节点从其父节点中被移除时触发。
- DOMNodeInsertedIntoDocument：在一个节点被直接插入文档或通过子树间接插入文档之后触发。这个事件在DOMNodeInserted 之后触发。
- DOMNodeRemovedFromDocument：在一个节点被直接从文档中移除或通过子树间接从文档中移除之前触发。这个事件在DOMNodeRemoved 之后触发。
- DOMAttrModified：在特性被修改之后触发。
- DOMCharacterDataModified：在文本节点的值发生变化时触发。
<! 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>
(1)删除节点
//假设要移除<ul>元素，验证以上事件发生的顺序。
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeRemoved", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(list.firstChild, "DOMNodeRemovedFromDocument",
function(event){
alert(event.type);
alert(event.target);
});
list.parentNode.removeChild(list);
});
(2)插入节点
//假设要为<ul>添加一个<li>元素，验证以上事件发生的顺序。
EventUtil.addHandler(window, "load", function(event){
var list = document.getElementById("myList");
var item = document.createElement("li");
item.appendChild(document.createTextNode("Item 4"));
EventUtil.addHandler(document, "DOMSubtreeModified", function(event){
alert(event.type);
alert(event.target);
});
EventUtil.addHandler(document, "DOMNodeInserted", function(event){
alert(event.type);
alert(event.target);
alert(event.relatedNode);
});
EventUtil.addHandler(item, "DOMNodeInsertedIntoDocument", function(event){
alert(event.type);
alert(event.target);
});
list.appendChild(item);
});
7、HTML5事件
(1)contextmenu事件
- 由于contextmenu 事件是冒泡的，因此可以为document指定一个事件处理程序，用以处理页面中发生的所有此类事件。
- 这个事件的目标是发生用户操作的元素。在所有浏览器中都可以取消这个事件。
- 通常使用contextmenu事件来显示自定义的上下文菜单，而使用onclick事件处理程序来隐藏该菜单。
<!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="http://www.nczonline.net">Nicholas’ site</a></li>
<li><a href="http://www.wrox.com">Wrox site</a></li>
<li><a href="http://www.yahoo.com">Yahoo!</a></li>
</ul>
</body>
</html>
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事件
- 这个事件会在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。
- 这个事件的意图是将控制权交给用户。显示的消息会告知用户页面行将被卸载（正因为如此才会显示这个消息），询问用户是否真的要关闭页面，还是希望继续留下来。
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;
});
(3)DOMCdontentLoaded事件
- DOMContentLoaded 事件在形成完整的DOM 树之后就会触发，不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。
- 要处理DOMContentLoaded事件，可以为document或window添加相应的事件处理程序（尽管这个事件会冒泡到window，但它的目标实际上是document）
EventUtil.addHandler(document, "DOMContentLoaded", function(event){
alert("Content loaded");
});
(4)hashchange事件
- HTML5 新增了hashchange事件，以便在URL的参数列表（及URL中“#”号后面的所有字符串）发生变化时通知开发人员。
- 必须要把hashchange 事件处理程序添加给window对象，然后URL参数列表只要变化就会调用它。
- 此时的event 对象应该额外包含两个属性：oldURL和newURL。这两个属性分别保存着参数列表变化前后的完整URL。
EventUtil.addHandler(window, "hashchange", function(event){
alert("Old URL: " + event.oldURL + "\nNew URL: " + event.newURL);
});
- 只有Firefox 6+、Chrome和Opera支持oldURL和newURL属性。为此，最好是使用location对象来确定当前的参数列表。
EventUtil.addHandler(window, "hashchange", function(event){
alert("Current hash: " + location.hash);
});
- 使用以下代码可以检测浏览器是否支持hashchange 事件。
var isSupported = ("onhashchange" in window) && (document.documentMode ===
undefined || document.documentMode > 7);
8、设备事件
(1)orientationchange事件
- 苹果公司为移动Safari中添加了orientationchange事件，以便开发人员能够确定用户何时将设备由横向查看模式切换为纵向查看模式。
- 移动Safari 的window.orientation属性中可能包含3个值：0表示肖像模式，90表示向左旋转的横向模式（“主屏幕”按钮在右侧），-90表示向右旋转的横向模式（“主屏幕”按钮在左侧）。
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;
});
});
- 所有iOS 设备都支持orientationchange 事件和window.orientation 属性。
(2)MozOrientation 事件
- Firefox 3.6 为检测设备的方向引入了一个名为MozOrientation的新事件。当设备的加速计检测到设备方向改变时，就会触发这个事件。
EventUtil.addHandler(window, "MozOrientation", function(event){
//响应事件
});
- 此时的event 对象包含三个属性：x、y和z。这几个属性的值都介于1到-1之间，表示不同坐标轴上的方向。
- 如果设备向右倾斜，x值会减小；反之，向左倾斜，x值会增大。z轴检测垂直加速度度，1 表示静止不动，在设备移动时值会减小。
- 只有带加速计的设备才支持MozOrientation 事件.
Warning: This experimental API was removed in Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), when support for the standard DeviceOrientationEvent was implemented. You should use that API instead.
(3)deviceorientation 事件
- 触发deviceorientation事件时，事件对象中包含着每个轴相对于设备静止状态下发生变化的信息。事件对象包含以下5 个属性。
- alpha：在围绕z 轴旋转时（即左右旋转时），y 轴的度数差；是一个介于0 到360 之间的浮点数。
- beta：在围绕x 轴旋转时（即前后旋转时），z 轴的度数差；是一个介于-180 到180 之间的浮点数。
- gamma：在围绕y 轴旋转时（即扭转设备时），z 轴的度数差；是一个介于-90 到90 之间的浮点数。
- absolute：布尔值，表示设备是否返回一个绝对值。
- compassCalibrated：布尔值，表示设备的指南针是否校准过。
EventUtil.addHandler(window, "deviceorientation", function(event){
var output = document.getElementById("output");
output.innerHTML = "Alpha=" + event.alpha + ", Beta=" + event.beta +
", Gamma=" + event.gamma + "<br>";
});
- 通过这些信息，可以响应设备的方向，重新排列或修改屏幕上的元素。要响应设备方向的改变而旋转元素。
EventUtil.addHandler(window, "deviceorientation", function(event){
var arrow = document.getElementById("arrow");
arrow.style.webkitTransform = "rotate(" + Math.round(event.alpha) + "deg)";
});
(4)devicemotion 事件
- DeviceOrientation Event 规范还定义了一个devicemotion 事件，通过devicemotion 能够检测到设备是不是正在往下掉，或者是不是被走着的人拿在手里。
- 触发devicemotion 事件时，事件对象包含以下属性。
- acceleration：一个包含x、y和z属性的对象，在不考虑重力的情况下，告诉你在每个方向上的加速度。
- accelerationIncludingGravity：一个包含x、y和z属性的对象，在考虑z轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
- interval：以毫秒表示的时间值，必须在另一个devicemotion事件触发前传入。这个值在每个事件中应该是一个常量。
- rotationRate：一个包含表示方向的alpha、beta 和gamma 属性的对象。
EventUtil.addHandler(window, "devicemotion", function(event){
var output = document.getElementById("output");
if (event.rotationRate !== null){
output.innerHTML += "Alpha=" + event.rotationRate.alpha + ", Beta=" +
event.rotationRate.beta + ", Gamma=" +
event.rotationRate.gamma;
}
});
9、触摸与手势事件
(1)触摸事件
- 触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。
| 名称 | 详细 |
|---|---|
| touchstart | 当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 |
| touchmove | 当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动。 |
| touchend | 当手指从屏幕上移开时触发。 |
| touchcancel | 当系统停止跟踪触摸时触发。 |
- 每个触摸事件的event对象都提供了在鼠标事件中常见的属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey 和metaKey。
- 除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
名称|详细
-|-
touches|表示当前跟踪的触摸操作的Touch 对象的数组。
targetTouchs|特定于事件目标的Touch 对象的数组。
changeTouches|表示自上次触摸以来发生了什么改变的Touch 对象的数组。
每个Touch 对象包含下列属性。
名称|详细
-|-
clientX|触摸目标在视口中的x 坐标。
clientY|触摸目标在视口中的y 坐标。
identifier|标识触摸的唯一ID。
pageX|触摸目标在页面中的x 坐标。
pageY|触摸目标在页面中的y 坐标。
screenX|触摸目标在屏幕中的x 坐标。
screenY|触摸目标在屏幕中的y 坐标。
target|触摸的DOM 节点目标。使用这些属性可以跟踪用户对屏幕的触摸操作。
function handleTouchEvent(event){
//只跟踪一次触摸
if (event.touches.length == 1){
var output = document.getElementById("output");
switch(event.type){
case "touchstart":
output.innerHTML = "Touch started (" + event.touches[0].clientX +
"," + event.touches[0].clientY + ")";
break;
case "touchend":
output.innerHTML += "<br>Touch ended (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
case "touchmove":
event.preventDefault(); //阻止滚动
output.innerHTML += "<br>Touch moved (" +
event.changedTouches[0].clientX + "," +
event.changedTouches[0].clientY + ")";
break;
}
}
}
EventUtil.addHandler(document, "touchstart", handleTouchEvent);
EventUtil.addHandler(document, "touchend", handleTouchEvent);
EventUtil.addHandler(document, "touchmove", handleTouchEvent);
(2)手势事件
- 当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件。
| 名称 | 详细 |
|---|---|
| gesturestart | 当一个手指已经按在屏幕上而另一个手指又触摸屏幕时触发。 |
| gesturechange | 当触摸屏幕的任何一个手指的位置发生变化时触发。 |
| gestureend | 当任何一个手指从屏幕上面移开时触发。 |
- 每个手势事件的event对象都包含着标准的鼠标事件属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。
- 还包含两个额外的属性：rotation 和scale。
| 名称 | 详细 |
|---|---|
| rotation | 表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从0 开始）。 |
| scale | 表示两个手指间距离的变化情况（例如向内收缩会缩短距离）；这个值从1 开始，并随距离拉大而增长，随距离缩短而减小。 |
function handleGestureEvent(event){
var output = document.getElementById("output");
switch(event.type){
case "gesturestart":
output.innerHTML = "Gesture started (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gestureend":
output.innerHTML += "<br>Gesture ended (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
case "gesturechange":
output.innerHTML += "<br>Gesture changed (rotation=" + event.rotation +
",scale=" + event.scale + ")";
break;
}
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);
好好学习
