一叛赚、介紹
這節(jié)課呢敛熬，我們來了解的是JavaScript 事件。
HTML 事件是發(fā)生在 HTML 元素上的事情赘艳。
當(dāng)在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發(fā)這些事件克握。
二蕾管、知識點介紹
1、事件
2菩暗、EventListener
三掰曾、上課對應(yīng)視頻的說明文檔
1、事件
1.1停团、常見的HTML事件
下面是一些常見的HTML事件的列表:
事件? 描述
onchange? ? HTML 元素改變
onclick 用戶點擊 HTML 元素
onmouseover 用戶在一個HTML元素上移動鼠標(biāo)
onmouseout? 用戶從一個HTML元素上移開鼠標(biāo)
onkeydown? 用戶按下鍵盤按鍵
onload? 瀏覽器已完成頁面的加載
1.2事件綁定
要想讓 JavaScript 對用戶的操作作出響應(yīng)旷坦，首先要對 DOM 元素綁定事件處理函數(shù)。所謂事件處理函數(shù)佑稠，就是處理用戶操作的函數(shù)秒梅，不同的操作對應(yīng)不同的名稱。
在JavaScript中舌胶，有三種常用的綁定事件的方法：
1.在DOM元素中直接綁定捆蜀；
2.在JavaScript代碼中綁定；
3.綁定事件監(jiān)聽函數(shù)。
1.2.1辆它、在DOM中直接綁定事件
我們可以在DOM元素上綁定onclick誊薄、onmouseover、onmouseout娩井、onmousedown、onmouseup似袁、ondblclick洞辣、onkeydown、onkeypress昙衅、onkeyup等扬霜。好多不一一列出了。如果想知道更多事件類型請查看而涉， DOM事件 著瓶。
<input type="button" value="click me" onclick="hello()">
<script>
function hello(){
alert("hello world!");
}
</script>
1.2.2、在JavaScript代碼中綁定事件
在JavaScript代碼中（即 script 標(biāo)簽內(nèi)）綁定事件可以使JavaScript代碼與HTML標(biāo)簽分離啼县，文檔結(jié)構(gòu)清晰材原，便于管理和開發(fā)。
<input type="button" value="click me" id="btn">
<script>
document.getElementById("btn").onclick = function(){
alert("hello world!");
}
</script>
1.2.3季眷、使用事件監(jiān)聽綁定事件
綁定事件的另一種方法是用 addEventListener() 或 attachEvent() 來綁定事件監(jiān)聽函數(shù)余蟹。下面詳細(xì)介紹，事件監(jiān)聽子刮。
2威酒、事件監(jiān)聽
關(guān)于事件監(jiān)聽，W3C規(guī)范中定義了3個事件階段挺峡，依次是捕獲階段葵孤、目標(biāo)階段、冒泡階段橱赠。
起初Netscape制定了JavaScript的一套事件驅(qū)動機(jī)制（即事件捕獲）尤仍。隨即IE也推出了自己的一套事件驅(qū)動機(jī)制（即事件冒泡）。最后W3C規(guī)范了兩種事件機(jī)制狭姨，分為捕獲階段吓著、目標(biāo)階段、冒泡階段送挑。IE8以前IE一直堅持自己的事件機(jī)制（前端人員一直頭痛的兼容性問題）绑莺，IE9以后IE也支持了W3C規(guī)范。
W3C規(guī)范
語法：
element.addEventListener(event, function, useCapture)
event : （必需）事件名惕耕，支持所有 DOM事件 纺裁。
function：（必需）指定要事件觸發(fā)時執(zhí)行的函數(shù)。
useCapture：（可選）指定事件是否在捕獲或冒泡階段執(zhí)行。true欺缘，捕獲栋豫。false，冒泡谚殊。默認(rèn)false丧鸯。
注：IE8以下不支持。
<input type="button" value="click me" id="btn1">
<script>
document.getElementById("btn1").addEventListener("click",hello);
function hello(){
alert("hello world!");
}
</script>
2.1嫩絮、IE標(biāo)準(zhǔn)
語法：
element.attachEvent(event, function)
event：（必需）事件類型丛肢。需加“on“，例如：onclick剿干。
function：（必需）指定要事件觸發(fā)時執(zhí)行的函數(shù)蜂怎。
<input type="button" value="click me" id="btn2">
<script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
alert("hello world!");
}
</script>
2.2、事件監(jiān)聽的優(yōu)點
2.2.1置尔、可以綁定多個事件杠步。
<input type="button" value="click me" id="btn3">
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
alert("hello 1"); //不執(zhí)行
}
btn3.onclick = function(){
alert("hello 2"); //執(zhí)行
}
</script>
常規(guī)的事件綁定只執(zhí)行最后綁定的事件。
<input type="button" value="click me" id="btn4">
<script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
</script>
兩個事件都執(zhí)行了榜轿。
2.2.2幽歼、可以解除相應(yīng)的綁定
<input type="button" value="click me" id="btn5">
<script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//執(zhí)行了
btn5.addEventListener("click",hello2);//不執(zhí)行
btn5.removeEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
</script>
2.3、封裝事件監(jiān)聽
<input type="button" value="click me" id="btn5">
//綁定監(jiān)聽事件
function addEventHandler(target,type,fn){
if(target.addEventListener){
target.addEventListener(type,fn);
}else{
target.attachEvent("on"+type,fn);
}
}
//移除監(jiān)聽事件
function removeEventHandler(target,type,fn){
if(target.removeEventListener){
target.removeEventListener(type,fn);
}else{
target.detachEvent("on"+type,fn);
}
}
//測試
var btn5 = document.getElementById("btn5");
addEventHandler(btn5,"click",hello1);//添加事件hello1
addEventHandler(btn5,"click",hello2);//添加事件hello2
removeEventHandler(btn5,"click",hello1);//移除事件hello1
2.4谬盐、addEventListener() 方法
實例
在用戶點擊按鈕時觸發(fā)監(jiān)聽事件：
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄试躏。
addEventListener() 方法添加的事件句柄不會覆蓋已存在的事件句柄。
你可以向一個元素添加多個事件句柄设褐。
你可以向同個元素添加多個同類型的事件句柄颠蕴，如：兩個 "click" 事件。
你可以向任何 DOM 對象添加事件監(jiān)聽助析，不僅僅是 HTML 元素犀被。如： window 對象。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）外冀。
當(dāng)你使用 addEventListener() 方法時, JavaScript 從 HTML 標(biāo)記中分離開來寡键，可讀性更強(qiáng)， 在沒有控制HTML標(biāo)記時也可以添加事件監(jiān)聽雪隧。
你可以使用 removeEventListener() 方法來移除事件的監(jiān)聽西轩。
語法
element.addEventListener(event, function, useCapture);
第一個參數(shù)是事件的類型 (如 "click" 或 "mousedown").
第二個參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)。
第三個參數(shù)是個布爾值用于描述事件是冒泡還是捕獲脑沿。該參數(shù)是可選的藕畔。
注意:不要使用 "on" 前綴。 例如庄拇，使用 "click" ,而不是使用 "onclick"注服。
2.5韭邓、向原元素添加事件句柄
實例
當(dāng)用戶點擊元素時彈出 "Hello World!" :
element.addEventListener("click", function(){ alert("Hello? World!"); });
你可以使用函數(shù)名，來引用外部函數(shù):
實例
當(dāng)用戶點擊元素時彈出 "Hello World!" :
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
2.6溶弟、向同一個元素中添加多個事件句柄
addEventListener() 方法允許向同一個元素添加多個事件女淑，且不會覆蓋已存在的事件：
實例
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
你可以向同個元素添加不同類型的事件：
實例
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
2.7、向 Window 對象添加事件句柄
addEventListener() 方法允許你在 HTML DOM 對象添加事件監(jiān)聽辜御， HTML DOM 對象如： HTML 元素, HTML 文檔, window 對象鸭你。或者其他支出的事件對象如: xmlHttpRequest 對象擒权。
實例
當(dāng)用戶重置窗口大小時添加事件監(jiān)聽：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
2.8傳遞參數(shù)
當(dāng)傳遞參數(shù)值時袱巨，使用"匿名函數(shù)"調(diào)用帶參數(shù)的函數(shù)：
實例
element.addEventListener("click", function(){ myFunction(p1, p2); });
2.9、事件冒泡或事件捕獲菜拓？
事件傳遞有兩種方式：冒泡與捕獲瓣窄。
事件傳遞定義了元素事件觸發(fā)的順序笛厦。 如果你將 <p> 元素插入到 <div> 元素中纳鼎，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發(fā)呢？
在冒泡中裳凸，內(nèi)部元素的事件會先被觸發(fā)贱鄙，然后再觸發(fā)外部元素，即： <p> 元素的點擊事件先觸發(fā)姨谷，然后會觸發(fā) <div> 元素的點擊事件逗宁。
在捕獲中，外部元素的事件會先被觸發(fā)梦湘，然后才會觸發(fā)內(nèi)部元素的事件瞎颗，即： <div> 元素的點擊事件先觸發(fā) ，然后再觸發(fā) <p> 元素的點擊事件捌议。
addEventListener() 方法可以指定 "useCapture" 參數(shù)來設(shè)置傳遞類型：
addEventListener(event, function, useCapture);
默認(rèn)值為 false, 即冒泡傳遞哼拔，當(dāng)值為 true 時, 事件使用捕獲傳遞。
實例
document.getElementById("myDiv").addEventListener("click", myFunction, true);
2.10瓣颅、removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
實例
element.removeEventListener("mousemove", myFunction);
2.11倦逐、瀏覽器支持
表格中的數(shù)字表示支持該方法的第一個瀏覽器的版本號。
方法? ? ? ? ? ? ? ? ?
addEventListener()? 1.0 9.0 1.0 1.0 7.0
removeEventListener()? 1.0 9.0 1.0 1.0 7.0
注意: IE8及更早 IE 版本宫补，Opera 7.0及其更早版本不支持addEventListener()和 removeEventListener()方法檬姥。但是，對于這類瀏覽器版本可以使用detachEvent() 方法來移除事件句柄:
element.attachEvent(event, function);
element.detachEvent(event, function);
實例
跨瀏覽器解決方法:
var x = document.getElementById("myBtn");
if (x.addEventListener) {// 所有主流瀏覽器粉怕，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {? ? ? ? ? ? // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
2.12健民、事件委托
事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上贫贝，觸發(fā)執(zhí)行效果荞雏。
<input type="button" value="click me" id="btn6">
var btn6 = document.getElementById("btn6");
document.onclick = function(event){
event = event || window.event;
var target = event.target || event.srcElement;
if(target == btn6){
alert(btn5.value);
}
}
上面只是個例子，代碼盡可能的簡化了。在實際的代碼中 我們可能用到j(luò)Query的live()凤优、delegate()悦陋、bind()、on()等筑辨。
事件委托優(yōu)點
2.12.1俺驶、
提高JavaScript性能。事件委托可以顯著的提高事件的處理速度棍辕，減少內(nèi)存的占用暮现。 實例分析JavaScript中的事件委托和事件綁定 ，這篇文章寫得還不錯楚昭。
傳統(tǒng)寫法
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
item1.onclick = function(){
alert("hello item1");
}
item2.onclick = function(){
alert("hello item2");
}
item3.onclick = function(){
alert("hello item3");
}
</script>
事件委托
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
document.addEventListener("click",function(event){
var target = event.target;
if(target == item1){
alert("hello item1");
}else if(target == item2){
alert("hello item2");
}else if(target == item3){
alert("hello item3");
}
})
</script>
2.12.2栖袋、
動態(tài)的添加DOM元素，不需要因為元素的改動而修改事件綁定抚太。
傳統(tǒng)寫法
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var list = document.getElementById("list");
var item = list.getElementsByTagName("li");
for(var i=0;i<item.length;i++){
(function(i){
item[i].onclick = function(){
alert(item[i].innerHTML);
}
})(i)
}
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>
點擊item1到item3都有事件響應(yīng)塘幅，但是點擊item4時，沒有事件響應(yīng)尿贫。說明傳統(tǒng)的事件綁定無法對動態(tài)添加的元素而動態(tài)的添加事件电媳。
事件委托
<ul id="list">
<li id="item1" >item1</li>
<li id="item2" >item2</li>
<li id="item3" >item3</li>
</ul>
<script>
var list = document.getElementById("list");
document.addEventListener("click",function(event){
var target = event.target;
if(target.nodeName == "LI"){
alert(target.innerHTML);
}
})
var node=document.createElement("li");
var textnode=document.createTextNode("item4");
node.appendChild(textnode);
list.appendChild(node);
</script>
當(dāng)點擊item4時，item4有事件響應(yīng)庆亡。說明事件委托可以為新添加的DOM元素動態(tài)的添加事件匾乓。
