事件綁定：有三種常用的綁定事件的方法：
1、在DOM元素中直接綁定；
2、在 javascript 代碼中綁定；
3、綁定事件監聽函數。
1、在DOM中直接綁定事件
我們可以在DOM元素上直接綁定事件
例如：
<input type='button' value='click me' οnclick='hello()'>
<script>
function hello(){
alert('hello world!');
};
</script>
2、在 javascript代碼中綁定
在javascript代碼中（即script標籤內）綁定事件可以使用javascript代碼與HTML標籤分離，文檔清晰，便於管理和開發。
例如：
<input type='button' value='click me' id='btn'>
<script>
document.getElementById('btn').onclick = function(){
alert('hello world!');
};
</script>
3、使用時間監聽綁定事件
綁定事件的另一種方法是用addEventListener()或attachEvent()來綁定時間監聽函數。
事件監聽
關於時間監聽，定義了3個事件階段，依次是捕獲階段、目標階段、冒泡階段。
語法：
element.addEventListener(event,function,useCapture)
event：（必需）事件名，支持所有DOM事件。
function：（必需）指定要事件觸發時執行的函數。
useCapture：（可選）指定事件是否在捕獲或冒泡階段執行。true，捕獲。false，冒泡。默認是false。
注意：ie8一下不支持
例如：
<input type='button' value='click me' id='btn1' />
<script>
document.getElementById('btn1').addEventListener('click',hello);
function hello(){
alert('hello world!');
};
</script>
IE標準：
語法：
element.attachEvent(event,function)
event:（必需）事件類型。需加“on”，例如：onclick。
function：（必需）指定要事件觸發時執行的函數。
例如：
<input type='button' value='click me' id='btn2' />
<script>
document.getElementById('btn2').attachEvent('onclick',hello);
function hello(){
alert('hello world!');
};
</script>
事件監聽的優點
1、可以綁定多個事件。
例如：常規方式綁定
<input type='button' value='click me' id='btn3' />
<script>
var btn3 = document.getElementById('btn3');
btn3.onclick = function(){
alert('hello 1');//不執行
};
btn3.onclick = function(){
alert('hello 2');//執行
};
</script>
注意：常規事件綁定只執行最後綁定的事件。
用監聽的方法來綁定
<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>
這樣兩個事件都執行了。
2、可以解除相應的綁定
例如：
<input type='button' value='click me' id='btn5' />
<script>
var btn5 = document.getElementById('btn5');
btn5.addEventListener('click',hello1); //執行了
btn5.addEventListener('click',hello2); //不執行
btn5.removeEventListener('click',hello2);
function hello1(){
alert('hello 1');
};
function hello2(){
alert('hello 2');
};
</script>
封裝事件監聽
<input type='button' value='click me' id='btn5' />
//綁定監聽事件
function addEventHandler(target,type,fn){
if(target.addEventListener){
target.addEventListener(type,fn);
}else{
target.addEventListener('on'+type,fn);
};
};
//移除監聽事件
function removeEventHandler(target,type,fn){
if(target.removeEventListener){
target.removeEventListener(type,fn);
}else{
target.detachEvent('on'+type,fn);
};
};
事件委託
事件委託就是利用冒泡的原理，把時間加到父元素上，觸發執行效果。
<input type='button' value='click me' id='btn6' />
<script>
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);
};
};
</script>
事件委託的優點
1、能夠提高javascript性能，事件委託可以顯著的提高事件的處理速度，減少內存的佔用。
例如：
<ul id='list'>
<li id='item1'>item1</li>
<li id='item2'>item1</li>
<li id='item3'>item1</li>
</ul>
<script>
var item1 = document.getElementById('item1');
var item1 = document.getElementById('item2');
var item1 = 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、動態的添加DOM元素，不需要因爲元素的改動而修改事件綁定。
<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;//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>
註釋：
什麼是nodeName？
獲得bod元素的節點名稱：
定義和用法：
nodeName屬性指定節點的節點名稱。
如果節點是元素節點，則nodeName屬性返回標籤名。
入股節點是屬性節點，則nodeName屬性返回屬性的名稱。
對於其他節點類型，nodeName屬性返回不同節點類型的不同名稱。
什麼是event對象？
event對象代表事件的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！
其實 event對象就是事件的結合。
什麼是target？
target事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文檔或窗口。
語法：event.target返回事件的目標節點。
什麼是createTextNode？
這個方法可以創建一個文本節點：
什麼是event.srcElement？
設置或獲取觸發事件的對象，引用對象，這個對象有什麼屬性，就可以使用。
常用的有：
event.srcElement.TagName //事件對象的html標記
event.srcElement.innerText //事件對象的內文
event.srcElement.value //表單事件對象的值
本人小白一枚，還在學習的路上，如有大神路過，請不吝賜教
本人小白一枚，還在學習的路上，如有大神路過，請不吝賜教