jquery綁定事件:

<div id="click1">bind事件</div><!--如果有動態元素，不能觸發-->
<div id="click2">one</div><!--只能點擊一次-->
<div id="click3">live</div><!--已經棄用-->
<div id="click4">
<div class="click4Child">delegate</div>
</div>
<div id="click5">
<div class="click5Child">on</div>
</div>
對應的代碼：

//jquery綁定click事件的寫法start
$("#click1").bind("click",function() {
alert("bind事件");
});
$("#click2").one("click",function() {
alert("one事件");
});
/*$("#click3").live("click",function() {
alert("live");
});*/
$("#click4").delegate(".click4Child","click",function() {
alert("delegate");
});
$("#click5").on("click",".click5Child",function() {
alert("on");
});

js綁定事件：

<div id="click6">addEventListener</div>
<div id="click7">click7</div>
<div id="click8" onclick="click8()">click8</div>
<div id="click9">
<div class="click9Child1">child1
<div class="click9Child2">child2
<div class="click9Child3">clild3</div>
</div>
</div>
</div>
<div id="click10">
<div class="click10Child1">child1
<div class="click10Child2">child2</div>
</div>
</div>
對應的代碼：

//js事件綁定寫法
document.getElementById("click6").addEventListener("click",function() {
alert("addEventListener");
});//最後一個參數默認是false,表示冒泡;為true表示捕獲
document.getElementById("click7").onclick = function() {
alert(1);
}
function click8() {
alert("click8");
}

var click9 = document.getElementById("click9");
var click9Child1 = document.getElementsByClassName("click9Child1")[0];
var click9Child2 = document.getElementsByClassName("click9Child2")[0];
var click9Child3 = document.getElementsByClassName("click9Child3")[0];

click9Child1.addEventListener("click",function() {
alert(1);
});
click9Child2.addEventListener("click",function() {
alert(2);
},true);
click9Child3.addEventListener("click",function(event) {
alert(3);
//event.stopPropagation();//阻止冒泡
});

// 在做上述問題的時候，如果要點擊child3時，出現的順序是2,3,1.為什麽呢？child1表示的是冒泡，child2表示的是捕獲，child3表示的是冒泡。
// 要點擊child3,先看它父級的父級,從上到下的順序是(child1,child2,child3)，因為不管什麽時候先執行捕獲然後執行冒泡，所以結果排出來的順序是(child2,child3,child1)。
// 如果要點擊child2，同樣先看父級的父級,從上到下的順序是(child1,child2),所以結果排出來的順序是(2,1)
//IE8以下不支持以上寫法

//下面我們來看支持IE的綁定事件的寫法
var click10 = document.getElementById("click10");
var click10Child1 = document.getElementsByClassName("click10Child1")[0];
var click10Child2 = document.getElementsByClassName("click10Child2")[0];

click10.attachEvent("onclick",function() {
alert("click10");
});
click10Child1.attachEvent("onclick",function() {
alert("click10Child1");
});
click10Child2.attachEvent("onclick",function(event) {
alert("click10Child2");
event.cancelBubble = true; //阻止冒泡
});

下面來一個兼容所有瀏覽器的事件綁定的寫法

<!--兼容所有瀏覽器-->
<div id="click11">
<div class="click11Child1">child1
<div class="click11Child2">child2</div>
</div>
</div>
在寫代碼之前引用一個公共文件EventUtil.js,文件如下：

var EventUtil = {
addHandler: function(element,type,handler) {
if (element.addEventListener) {
element.addEventListener(type,handler);
} else if (element.attachEvent) {
element.attachEvent("on"+type,handler);
} else {
element["on" + type] = handler;
}
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
}

var click11 = document.getElementById("click11");
var click11Child1 = document.getElementsByClassName("click11Child1")[0];
var click11Child2 =document.getElementsByClassName("click11Child2")[0];
EventUtil.addHandler(click11,"click",function() {
alert("click11");
});
EventUtil.addHandler(click11Child1,"click",function() {
alert("click11Child1");
});
EventUtil.addHandler(click11Child2,"click",function(event) {
alert("click11Child2");
EventUtil.stopPropagation(event);
});

這些我只是寫了給元素添加事件以及阻止冒泡的方法，後續如果有添加，會添加。如果有問題，麻煩指出。

jquery綁定事件以及js綁定事件