事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。
事件捕获：即不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
事件处理程序：1.HTML处理程序
<body>
<div id="box">
<input type="button" value="按钮" id="btn" onclick="alert(123)"/>
</div>
</body>
javascript和html耦合在一起，改起来比较麻烦，不建议使用的：
function showMessage(){ alert("hello word") } </script> </head> <body> <div id="box"> <input type="button" value="按钮" id="btn" onclick="showMessage()"/> </div>
2.dom0级事件处理程序
较传统的方式：把一个函数赋值给一个事件爱你的处理程序属性用的比较多的方法 简单 夸浏览器的优势
window.onload=function(){ var btn2=document.getElementById('btn2'); btn2.onclick=function(){ alert('这个是dom0级添加的事件') } // btn2.onclick=null; } <input type="button" value="按钮3" id="btn3"/>
3.dom2级事件处理程序
dom2级事件定义了两种方法：
用于处理指定和删除事件处理程序的操作
addEventListener()和removeEventListner()
接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值（false事件冒泡，true事件捕获）
window.onload=function(){ var btn3=document.getElementById('btn3'); btn3.addEventListener('click',showMessage,false);
btn3.addEventListener('click',function(){
alert(this.value)
},false);
btn3.removeEventListener('click',showMessage,false); } <input type="button" value="按钮3" id="btn3"/>
4.IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
接收相同的两个参数：事件处理程序的名称和事件处理程序的函数
不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡
window.onload=function(){ var btn3=document.getElementById('btn3'); btn3.attachEvent('onclick',showMessage) } <input type="button" value="按钮3" id="btn3"/>
5.跨浏览器的事件处理程序
function showMessage(e){ alert(e.type); } var eventUtil={ //添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){//dom二级 element.addEventListener(type,handler,false); }else if(element.attachEvent){//IE element.attachEvent('on'+type,handler); }else{//dom0级 element['on'+type]=handler;//element.onclick===element['onclick']; } }, //删除句柄 removeHandler:function(element,type,handler){ if(element.removeEventListener){//dom二级 element.removeEventListener(type,handler,false) }else if(element.detachEvent){//IE element.detachEvent('on'+type,handler); }else{//dom0级 element['on'+type]=null;//element.onclick===element['onclick'] } } } <input type="button" value="按钮3" id="btn3"/> <script> var btn3=document.getElementById('btn3'); eventUtil.addHandler(btn3,'click',showMessage); //eventUtil.removeHandler(btn3,'click',showMessage); </script>