09JavaScript中的事件（键盘事件、执行多次事件、事件冒泡、事件委派）

开发工具与关键技术：Adobe Dreamweaver JavaScript

JavaScript事件总结

1、JS事件

	（1）点击事件：onclick
	（2）双击事件：ondblclick
	（3）失去焦点：onblur
	（4）获得焦点：onfocus
	（5）鼠标移入：onmouseover
	（6）鼠标移出：onmouseout
	（7）鼠标移动：onmousemove
	（8）窗口尺寸被调整：onresize
	（9）按下鼠标：onmousedown
	（10）松开鼠标：onmouseup
	（11）滚动鼠标滚轮：onmousewheel
	（12）滚动元素的滚动条：onscroll
	（13）当元素获得用户输入时运行脚本：oninput
	（14）用户退出页面：onunload
	（15）输入值触发的事件：oninput
	（16）onchange（）：值发生改变或者失去焦点触发的事件
	注意，该事件触发的前提需要失去焦点

2、form表单事件

	（1）提交表单发生的事件：onsubmit
	（2）重置按钮被点击发生的事件：onreset

3、键盘事件

	（1）onkeydup：键盘被松开的事件
	（2）onkeydown：键盘按下事件
			a.如果一致按着某个键不松开，则会一直触发该事件
			b.当onkeydown事件连续触发时，第一次和第二次之间的间隔事件稍微长一点，这
			是伪类防止误操作的发生
	（3）可以通过keyCode来获取按键的编码，通过它可以判断那个键被按下
	（4）事件对象中的属性
			a.：altkey：判断alt键是否被按下，如果按下了返回true
			b.：ctrlKey：判断ctrl键是否被按下；
			c.ShiftKey：判单shift键是否被按下了
			d.两个键同时被按下例如：
			function move(event){
				if(event.keyCode ==65 && event.shiftKey){
					alert("a和shift键同时被按下了");
				}
			}

4、事件冒泡

	（1）事件冒泡指的就是事件的向上传导，当后代元素上的事件被触发时
		其祖先元素的相同事件也会被触发。而在开发中大部分情况冒泡都
		是有用的，如果不需要可以取消冒泡
	（2）取消冒泡：cancelBubxble = true;
		

5、事件委派

	（1）指将事件统一绑定给元素共同的祖先元素，这样当后代元素上
			的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应
			函数来处理事件
	（2）事件对象的属性target：返回触发此事件的元素	

6、执行多次事件 事件绑定

（1）当使用 对象.事件 = 函数形式绑定事件时，这种只能为同一元素绑定			同一事件一次，不能绑定多次，如果绑定多次，后面会覆盖掉前面的
（2）addEventListener（），可以为一个元素的相同事件绑定多个响应函数
		参数一：事件的类型 不加on（如“click”）
		参数二：事件触发后调用的函数
		参数三：事件冒泡或事件捕捉，需要一个布尔值，默认冒泡，即false.
				(该参数是可选的)
	在冒泡中，内部元素的事件会先被触发，然后再触发外部元素，捕捉则相反
	注意：这个方法不支持IE8及以下的
（3）attachEvent（），只支持IE浏览器 
	参数一：执行事件，要加on  参数二：回调函数

7、解除事件绑定：

（1）addEventListener（事件名称，函数，捕获） 对应的是 
		removeEventListene（事件名称，函数，捕获）
（2）attachEvent（事件名称要加on,函数） 对应的是  
		detachEvent（事件名称要加on，函数）  IE方式

8、事件监听

Style.pointerEvents：none 作用是防止多次事件同时发生，点击了一次
						直到事件完成才可再次点击该事件 
	注意：该事件前面要加一个style
none不可监听    auto：正常监听

9、事件捕获
（1）捕获事件和取消捕获：

//捕获元素
	if(obj.setCapture){
		obj.setCapture();
	}
//取消捕获
	if(obj.releaseCapture){
		obj.releaseCapture();
	}
//注意：这个方法只有IE才支持