JavaScript事件

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

---

事件

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

---

事件三要素

事件目标(event target) 发生的事件与之相关联或与之相关的对象事件处理程序(event handler) 处理或响应事件的函数事件对象(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

---

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

事件冒泡(IE事件流) – 从内到外 事件开始由最具体的元素接收，然后逐级向上传播到不具体的节点 阻止冒泡：event.stopPropogation()用于IE8以上；event.cancelBubble=true;用于IE8及以下 if(event.stopPropagation){ event.stopPropagation(); }else { event.cancelBubble = true; } 事件捕获(Netscape事件流) --从外到内 不太具体的节点更早接收事件，具体的节点到最后接收事件。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捕获阶段调用 最后一个参数不写默认是falseremoveEventListener() 事件解绑 参数： 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] });