事件处理（2）—— 鼠标事件、键盘事件

鼠标事件

鼠标点击
鼠标点击事件包括4个：click(单击)、dblclick（双击）、mousedown（按下）、mouseup（松开）。其中click事件类型比较常用，而mousedown和mouseup事件类型多用于鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为false时，则会禁止绑定对象的默认行为。
示例 当定义超链接指向自身时（多在设计过程中href属性值暂时使用#或？表示），可以取消超链接被单击时默认行为，即刷新页面

<a href="#">刷新</a>
<script type="text/javascript">
	var a = document.getElementsByTagName('a')
	for (var i = 0; i < a.length; i++) {
		//判断当前超链接href属性中是否包含本页面的url信息
		if ((new RegExp(window.location.href)).test(a[i].href)) {
			a[i].onclick = function() {
				return false //禁止超链接的默认行为
			}
		}
	}
</script>

鼠标移动
mousemove事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发mousemove事件
鼠标经过
鼠标经过包括移入和移出两种事件类型。当移动鼠标指针到某个元素上时，将触发mouseover事件，而当把鼠标指针移出某个元素时，将触发mouseout事件.。如果从父元素中移动到子元素中时，也会触发父元素的mouseover事件类型

<div>
	<div>
		<div>盒子</div>
	</div>
</div>
<script type="text/javascript">
	var div = document.getElementsByTagName("div")
	for (var i = 0; i < div.length; i++) {
		div[i].onmouseover = function() {
			this.style.border = "solid blue"
		}
		div[i].onmouseout = function() {
			this.style.border = "solid red"
		}
	}
</script>

鼠标来源
当一个事件发生后，可以使用事件对象的target属性获取发生事件的节点元素。如果再ie事件模型中实行相同的目标可以使用srcElement属性

//jQuery，οnclick=function是JavaScript中的
$('#list').click(function(e){
	alert(e.target.innerHTML)
})
//JavaScript
<ul id="list">
	<li>项目1</li>
	<li>项目2</li>
</ul>
<script type="text/javascript">
	var list = document.getElementById("list")
	list.onclick = function(e) {   //事件托管
		var e = e || window.event
		var o = e.target || e.srcElement
		alert(o.innerHTML)
	}
//或
var list = document.getElementsByTagName("li")
for (var i = 0; i < list.length; i++) {
	list[i].onclick = function(e) {
		var e = e || window.event //兼容DOM和IE事件模型
		var o = e.target || e.srcElement //获取当前事件的节点
		alert(o.innerHTML)
	}
}
</script>

鼠标定位
当事件发生时，获取鼠标的位置很重要。由于浏览器的不同兼容性，不同浏览器分别在各自事件对象中定义了不同的属性

键盘事件

描述
键盘事件主要包括以下三种类型：
keydown：按下某个键时触发，如果按住某个键，会不断触发该事件。该事件处理函数返回false时，会取消默认的动作
keypress：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回false时，会取消默认的动作
keyup：释放某个键盘的触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态
键盘事件属性
键盘事件常用属性：
keyCode：该属性包含键盘中对应键位的键值
shiftKey：是否按下shift键，按下返回true
ctrlKey：是否按下ctrl键，按下返回true
altKey：是否按下alt键，按下返回true

键位和码值对照表

键 位			码 值			键 位			码 值
0~9         	48~57       	字母表          65~90
退格键           8              Tab              9
回车键           13             空格键           32
左箭头           37             上箭头           38
右箭头           39             下箭头           40

键盘响应顺序
对于字符键：keydown、keypress、keyup
对于非字符键：keydown、keyup

**示例1：**检测【ctrl】和【shift】键是否被同时按下。如果同时按下，且鼠标单击某个元素，则会把该元素从页面中删除

<div style="width: 200px;height: 100px;background-color: red;"></div>
<script type="text/javascript">
	document.onclick = function(e) {
		var e = e || window.event //标准化事件对象
		var t = e.target || e.srcElement //获取发生事件的元素，兼容IE和DOM
		if (e.ctrlKey && e.shiftKey) {
			t.parentNode.removeChild(t) //移除当前元素
		}
	}
</script>

示例2 使用方向键控制页面元素的移动效果

<div id="box"></div>
<script type="text/javascript">
	var box = document.getElementById("box")
	box.style.position = "absolute"
	box.style.width = "20px"
	box.style.height = "20px"
	box.style.backgroundColor = "red"
	document.onkeydown = onkeyDown

	function onkeyDown(e) {
		var e = e || window.event
		switch (e.keyCode) {
			case 37:
				box.style.left = box.offsetLeft - 5 + "px"
				break
			case 39:
				box.style.left = box.offsetLeft + 5 + "px"
				break
			case 38:
				box.style.top = box.offsetTop - 5 + "px"
				break
			case 40:
				box.style.top = box.offsetTop + 5 + "px"
				break
		}
		return false
	}
</script>

示例3： 获取键盘事件响应顺序

<textarea id="text" cols="26" rows="16"></textarea>
<script type="text/javascript">
	var n = 1 //定义编号
	/* var text = document.getElementById("text")
	text.onkeydown = f
	text.onkeypress = f
	text.onkeypress = f */
	document.onkeydown = document.onkeypress = document.onkeyup = f

	function f(e) {
		var e = e || window.event
		text.value += (n++) + "=" + e.type + "(keyCode=" + e.keyCode + ")\n"
		if((n-1)%3==0){
			text.value+="\n"
		}
	}
</script>