dom01

事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。

事件捕获：即不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。

事件处理程序：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>