三种方式
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();