JavaScript事件

笔记放在Github上，点击访问下载

---

事件

Javascript与HTML之间的交互是通过事件实现的。
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

---

事件三要素

1. 事件目标(event target)
   发生的事件与之相关联或与之相关的对象
2. 事件处理程序(event handler)
   处理或响应事件的函数
3. 事件对象(event object)
   与特定事件相关，且包含有该事件详细信息的对象
   如div.onclick=function(event){}
   事件目标为div，事件处理程序为funtion(){}，事件对象为event

---

事件event的属性

• event的兼容问题
  IE8及以下，不支持event，需要改成window.event
  解决办法：event=event||window.event 对所有浏览器都支持
  1).target 事件目标，触发事件执行的元素 target=event.target||event.srcElement
  2).currentTarget 当前正在执行事件处理程序的元素
  event.currentTarget===this

---

事件流 – 从页面中接受事件的顺序

1. 事件冒泡(IE事件流) – 从内到外
   事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点

• 阻止冒泡：event.stopPropogation()用于IE8以上；event.cancelBubble=true;用于IE8及以下

if(event.stopPropagation){
	event.stopPropagation();
}else {
	event.cancelBubble = true;
}	

2. 事件捕获(Netscape事件流) --从外到内
   不太具体的节点更早接收事件，具体的节点到最后接收事件。
3. DOM事件流
   “DOM2级事件”规定了事件流包括三个阶段：事件捕获阶段，处理目标阶段和事件冒泡阶段。

---

阻止默认行为

形如a标签的默认跳转，提交submit按钮的默认提交等成为默认行为。
IE8以上：event.preventDefault()
IE8及以下：event.returnValue=false;

if(event.preventDefault){
	event.preventDefault();
}else {
	event.returnValue = false;
}

---

事件委派(事件代理)

将事件统一绑定给共同的祖先元素

var lis = document.getElementsByTagName('li');
lis = Array.prototype.slice.call(lis,0);
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function(event){
	if(event.target.nodeName==='LI'){
		lis.forEach(function(item){
			item.style.backgroundColor = '#fff';
		});
		event.target.style.backgroundColor = 'red';
	}
}

---

事件处理程序

响应某个事件的函数为事件处理程序，事件处理程序以"on"开头(onclick,onload)

• HTML事件处理程序

<input type="button" value="clickMe" onclick = "alert('is clicked')">
<input type="button" value="clickMe" onclick = "showMsg()">
<script type="text/javascript">
	function showMsg(){
	alert("is clicked");
	}
</script>

• DOM0级事件处理程序
  通过Javascript指定事件处理程序的传统方式，将一个函数赋值给一个事件处理程序属性。

var btn = document.getElementById("btn");
btn.onclick = function(){
alert('cliked');
}
btn.onclick = null; //删除事件处理程序

• DOM2级事件处理程序

---

DOM2级事件处理程序

非IE事件处理程序：

• addEventListener() 事件绑定
  参数：
  1.要绑定的事件名，不加’on’前缀；
  2.回调函数；
  3.布尔值：false冒泡阶段调用，true捕获阶段调用
  最后一个参数不写默认是false
• removeEventListener() 事件解绑
  参数：
  1.要解绑的事件名，不加’on’前缀；
  2.回调函数；
  3.布尔值：false冒泡阶段调用，true捕获阶段调用
  可添加多个事件处理程序，并且它们是按顺序触发
  事件绑定中的函数如果是匿名函数将无法删除

IE事件处理程序：

• attachEvent() 事件绑定
  参数：
  1.要绑定的事件名，要加’on’前缀；
  2.回调函数；
• detachEvent() 事件解绑
  参数：
  1.要解绑的事件名，要加’on’前缀；
  2.回调函数；
  this指向window对象
  多个事件处理程序执行时，按相反的顺序执行

---

事件对象的属性均为只读属性
在事件处理程序内部，对象this始终等于currentTarget值，即当前正在处理程序的目标

---

IE的事件对象

1.在IE8及以下，不支持event，需要使用window.event
2.在使用DOM0级添加事件时，event对象可以作为window对象的一个属性。

div.onclick = function(){
	console.log(window.event);//[object Event]
}

3.在使用attachEvent添加事件时，event对象会作为参数传入事件处理函数中

div.attachEvent('onclick',function(event){
				alert(window.event);//[object Event]
			});