事件可以被JavaScript侦测到的行为，通俗地讲就是当用户与web页面进行某些交互时，解析器就会创建响应的event对象以描述事件信息。   //比如鼠标事件等。

事件句柄（又称数据处理函数、事件监听函数），指用于响应某个事件而调用的函数。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句。    //比如给按钮添加一个onclick事件，点击该按钮，执行某个函数，该函数就是事件句柄。

一、HTML事件  //DOM事件中有说过

二、DOM0级事件  //DOM事件中有说过，只能绑定一个事件

三、DOM2级事件   //可以绑定多个事件
btn.addEventListener(‘click’, function(){},false)    //最后一个参数可以省略，默认为false

btn.addEventListener(‘click’, function(){},false)    //两个事件可以同时触发

ps：注意这里是click，而不是onclick

removeEventListener()    //里面三个参数，必须是字符串包起来的"onclick"等 | 事件句柄函数的名称   |   true/false（默认false）

ps：当addEventListener的事件句柄为匿名函数时，解绑不成功。

绑定：btn.attachEvent("onclick",hello);   //hello为事件句柄函数

解绑：btn.detachEvent("onclick",hello);

ps：attachEvent与detachEvent为DOM2级事件。在attachEvent中，this指向的是window

ps：这里用的是onclick，而不是click

<button id="myBtn">点击我</button>
<script type="text/javascript">

var EventUtil = {

addHandler:function(element,type,handler){　　//绑定事件
if(element.addEventListener){
element.addEventListener(type,handler,false);
}

else (element.attachEvent) {
element.attachEvent("on"+ type,handler);
}

},
removeHandler: function(element,type,handler){　　//移除事件

if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}

else (element.detachEvent) {
element.detachEvent("on"+type,handler);
}
}
}

var btn = document.getElementById("myBtn");
var handler = function(){
alert("Clicked");
}
EventUtil.addHandler(btn,"click",handler);
//EventUtil.removeHandler(btn,"click",handler);
</script>

事件冒泡：事件对象沿DOM树向上传播

事件捕获：事件对象沿DOM树向下传播

在DOM2级事件中，addEventListener的第三个参数，true/false，默认false为事件冒泡，true为事件捕获。

<ul id="ul">

<li id="one"> one </li>

<li id="two"> two </li>

<li id="three"> three </li>

</ul>

var ul = document.getElementById("ul");

ul.addEventListener("click",function(event){

if(event.target.id == "one")  alert(1);

else if(event.target.id == "two")  alert(2);

else(event.target.id == "three")  alert(3);

},false);

addEventListener("click",function(event){         //add绑定事件中，事件句柄自带event参数

console.log(event.type);     //打印出当前的事件类型

console.log(event.target);     //打印出当前事件源对象

console.log(event.currentTarget);     //事件绑定在谁身上，就打印谁

})

<a href="www.baidu.com" id="a">跳转链接</a>

var a = document.getElementById("a");

a.addEventListener("click",function(){

alert(123);

preventDefault();     //本来点击a链接的时候会弹出123后，再跳转百度；但是阻止默认行为后，只是弹出123，不会进行跳转了

})

<div id="parent">

<div id="child">点击</div>

</div>

var parent = document.getElementById("parent");

parent.addEventListener("click",function(){alert("parent");});

var child = document.getElementById("child");

child.addEventListener("click",function(){

alert("child");     //正常情况下会先弹出child再弹出parent

event.stopPropagation();     //添加完stopPropagation后，只会弹出child。

});