Javascript事件
Javascript事件
- 事件概述
事件：可被理解为是JavaScript侦测到的行为。
举例：这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域等。
事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为，并执行相应的事件处理程序的过程。
举例：鼠标移入文本区域，文本区域变色这一过程。
事件流
事件流描述的是从页面中接收事件的顺序，IE和Netscape提出来差不多完全相反的事件流的概念，IE事件流是事件冒泡流，Netscape事件流是事件捕获流。
事件冒泡
IE的事件流叫做事件冒泡，即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收，然后逐级向上（一直到文档）；如下代码：
<div id = "div">
<span id="span">
<a id="aTag">事件测试</a>
</span></div>
JS如下：
document.getElementById("aTag").addEventListener('click',aTag);
document.getElementById("span").addEventListener('click',span);
document.getElementById("div").addEventListener('click',div);function aTag(e) {
alert("点击的是a标签");
}function span(e) {
alert("点击的是span标签");
}function div(e) {
alert("点击的是div标签");
}
当单击 “事件测试”文字后，那么click事件会按照如下顺序传播；
1)先打印出：点击的是a标签
2) 再打印出：点击的是span标签
3) 最后打印出：点击的是div标签
4) 最后肯定是document文档。
所有现代浏览器都支持事件冒泡。
事件捕获：
事件捕获与事件冒泡事件流正好相反的顺序，事件捕获的事件流是最外层逐级向内传播，也就是先document，然后逐级div标签 ， span标签 , a标签;
上面的JS代码改成如下：
document.getElementById("div").addEventListener('click',div,true);
document.getElementById("aTag").addEventListener('click',aTag,true);
document.getElementById("span").addEventListener('click',span,true);
第三个参数设置为true，即为捕获事件，默认为false；否则的话，事件流还是和上面的一样，因为不管是在IE还是标准浏览器下，事件冒泡浏览器都支持的。
2.鼠标事件
|
事件名称 |
事件触发时机 |
|
click |
当按下并释放任意鼠标按键时触发 |
|
dblclick |
当鼠标双击时触发 |
|
mouseover |
当鼠标进入时触发 |
|
mouseout |
当鼠标离开时触发 |
|
change |
当内容发生改变时触发，一般多用于<select>对象 |
|
mousedown |
当按下任意鼠标按键时触发 |
|
mouseup |
当释放任意鼠标按键时触发 |
|
mousemove |
在元素内当鼠标移动时持续触发 |
【案例】鼠标拖曳特效
onmouseover：鼠标移动到元素之上触发事件
<script>
// 获取被拖动的盒子和拖动条
var box = document.getElementById('box');
var drop = document.getElementById('drop');
drop.onmousedown = function(event) { // 鼠标在拖动条上 按下可拖动盒子
var event = event || window.event;
// 获取鼠标按下时的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 计算鼠标按下的位置距盒子的位置
var spaceX = pageX - box.offsetLeft;
var spaceY = pageY - box.offsetTop;
(以下实现鼠标的拖拽的特效：）
document.onmousemove = function(event) { // 鼠标移动的时候 获取鼠标的位置 整个盒子跟着鼠标的位置走
var event = event || window.event;
// 获取移动后鼠标的位置
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// 计算并设置盒子移动后的位置
box.style.left = pageX - spaceX + 'px';
box.style.top = pageY - spaceY + 'px';
// 清理鼠标拖动时，选中拖动条中文字的情况
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
};
};
document.onmouseup = function() { // 释放鼠标按键时 取消盒子的移动
document.onmousemove = null;
};
</script>
3.设备事件中的—orientationchange事件
苹果公司为移动safari添加的orientationchange事件是能让用户确定何时将设备由横向查看模式切换到纵向模式触发的事件；此属性中包含三个值，0表示肖像模式；90表示向左旋转的横向模式（主屏幕按钮在右侧），-90表示向右旋转的横向模式(主屏幕按钮在左侧)，如下图所示：
只要用户改变了设备的查看模式，就会触发orientationchange事件，
使用IOS设备即可演示效果：代码如下：
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;
});
});
4.理解移动端的事件---触摸与手势事件
有以下几个触摸事件：
- touchstart: 当手指触摸屏幕时触发，即使是一个手指放在屏幕上也会触发。
- touchmove:当手指在屏幕上滑动时连续地触发，这个事件发生期间，我们可以使用preventDefault()事件可以阻止滚动。
- touchend: 当手指从屏幕上移开时触发。
- touchcancel: 当系统停止跟踪触摸时触发。
上面几个事件都属于冒泡事件，我们可以对此进行取消事件，每个触摸的event对象都提供了在鼠标中常见的属性；
bubbles, cancelable,view,clientX, clientY ，screenX, screenY,detail, altKey, shiftKey, ctrlKey, metaKey,
除了常见的DoM属性外，触摸事件还包含下列三个用于跟踪触摸的属性；
touches: 表示当前跟踪的触摸操作的Touch对象数组；
targetTouches: 特定与事件目标的Touch对象数组；
changeTouches: 表示自上次触摸以来发生了什么改变的Touch对象数组；
