三種方式
1、在DOM中直接綁定
2、在JS代碼中直接綁定
3、使用事件監聽函數綁定事件
一、在DOM中直接綁定
也就是直接在html標簽中通過 onXXX=“” 來綁定。舉個例子：
<input type="button" value="點我呦" οnclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="點我呦" οnclick="testAlert()">
<script type="text/javascript">
function testAlert(){
alert("hello world!");
}
</script>
缺點：
不利於行為和結構相分離，耦合度太高，不建議在項目中使用。
在遇到相同類型的事件時，只會去處理第一個事件，而忽略后續的事件。
傳統方法只會在事件冒泡中運行，而非捕獲和冒泡
事件對象參數(e)僅非IE瀏覽器可用
優點：
非常簡單和穩定，可以確保它在你使用的不同瀏覽器中運作一致
處理事件時，this關鍵字引用的是當前元素
事件解綁
對象.on事件名字=null;
<body>
<input type="button" value="第一個按鈕" id="btn1"/>
<input type="button" value="干掉第一個按鈕的事件" id="btn2"/>
<div id="dv"></div>
<script>
document.getElementById("btn1").onclick = function () {
console.log("碼仙");
};
document.getElementById("btn2").onclick = function () {
document.getElementById("btn1").onclick = null;
};
</script>
</body>
二、JavaScript代碼中直接綁定
在JavaScript中通過查找DOM對象，對其綁定，elementObject.οnclick=function(){} 的格式，舉例如下
<input type="button" value="點我呦" id="demo">
<script type="text/javascript">
document.getElementById("demo").οnclick=function testAlert(){
alert("hello world!");
}
</script>
優點
將行為與結構分離開了
非常簡單和穩定，可以確保它在你使用的不同瀏覽器中運作一致
處理事件時，this關鍵字引用的是當前元素
缺點：
傳統方法只會在事件冒泡中運行，而非捕獲和冒泡
一個元素一次只能綁定一個事件處理函數。新綁定的事件處理函數會覆蓋舊的事件處理函數
事件對象參數(e)僅非IE瀏覽器可用
事件解綁
對象.on事件名字=null;
<body>
<input type="button" value="第一個按鈕" id="btn1"/>
<input type="button" value="干掉第一個按鈕的事件" id="btn2"/>
<div id="dv"></div>
<script>
document.getElementById("btn1").onclick = function () {
console.log("碼仙");
};
document.getElementById("btn2").onclick = function () {
document.getElementById("btn1").onclick = null;
};
</script>
</body>
三、通過事件監聽函數綁定
使用 attachEvent(IE方式) 和 addEventListenter(W3C方式) 的好處就是，可以多次的進行事件的綁定，不向原始的方法那樣，前面綁定的事件將會被后面的綁定的事件所覆蓋，最后只能執行后面所綁定的函數。
從網上找到了一個兼容的好辦法，相比較if…else…語句，這個方法用的是
function addEvent(obj,type,handle){
try{
obj.addEventListener(type,handle,false);
}catch(e){
try{
obj.attachEvent('on'+type,handle);
}
catch(e){
obj['on' + type]=handle;//早期瀏覽器
}
}
}
W3C綁定的優點
1.該方法同時支持事件處理的捕獲和冒泡階段。事件階段取決於addEventListener最后的參數設置：false (冒泡) 或 true (捕獲)。
2.在事件處理函數內部，this關鍵字引用當前元素。
3.事件對象總是可以通過處理函數的第一個參數(e)捕獲。
4.可以為同一個元素綁定你所希望的多個事件，同時並不會覆蓋先前綁定的事件
W3C綁定的缺點
IE不支持，你必須使用IE的attachEvent函數替代。
IE方式的優點
可以為同一個元素綁定你所希望的多個事件，同時並不會覆蓋先前綁定的事件。
IE方式的缺點
1.IE僅支持事件捕獲的冒泡階段
2.事件監聽函數內的this關鍵字指向了window對象，而不是當前元素（IE的一個巨大缺點）
3.事件對象僅存在與window.event參數中
4.事件必須以ontype的形式命名，比如，onclick而非click
5.僅IE可用。你必須在非IE瀏覽器中使用W3C的addEventListener
解除綁定
1.綁定事件 對象.addEventListener(“沒有on的事件類型”,命名函數,false);
解綁事件 對象.removeEventListener(“沒有on的事件類型”,函數名字,false);
2.綁定事件 對象.attachEvent(“on事件類型”,命名函數);
解綁事件 對象.detachEvent(“on事件類型”,函數名字);
四、說說JQuery中綁定事件的幾種方法。
主要有on()、bind()、live()、delegate()等幾種，相對應的解綁就是off()、unbind()、live()、undelegate();
1 on()、bind()、live()、delegate()中除了bind()，其他的都可以給后來追加的元素對象添加綁定事件。
2 這幾種方法中各自有對應支持的JQuery版本。
3 在給動態添加的頁面元素綁定事件時，通常用on()方法。
具體的更多了解，可以點擊這個鏈接:http://www.cnblogs.com/DemoJin/p/4794372.html。
JavaScript之事件的綁定與移除:http://www.cnblogs.com/Ayinger/p/6723730.html
//阻止事件冒泡
// IE特有的,谷歌支持,火狐不支持
window.event.cancelBubble=true;
//阻止事件冒泡
//谷歌和火狐支持
event.stopPropagation();