事件处理分级

• HTML 事件处理程序

• DOM 0 级　事件处理程序

对于同一个 dom 节点而言，只能注册一个，后边注册的同种事件会覆盖之前注册的

• DOM 2 级　事件处理程序

<input type="button" value="按钮" 　id="btn" onclick="showMsg()" />
<button id="btn2">按钮2</button>
<input type="button" value="按钮3" id="btn3" />
<script type="text/javascript">
  // html级
  function showMsg(event) {
    console.log(this);
    console.log(event); // 事件对象　可以获取很多有用的信息，比如点击的坐标、具体触发该事件的dom元素等等
  }
  // Dom ０级别
  var btn2 = document.getElementById("btn2");
  btn2.onclick = showMsg;

  // Dom 2级别
  var btn3 = document.getElementById("btn3");
  btn3.addEventListener("click", showMsg, false); // 添加事件监听
  // btn3.removeEventListener('click',showMsg,false);　// 移除监听

  // ie 8 及更早浏览器
  if (btn3.attachEvent) {
    btn3.attachEvent("onclick", showMsg);
    btn3.detachEvent("onclick", showMsg);
  }
</script>

事件冒泡和事件捕获

• 事件冒泡 内层节点先接收事件,然后逐级向外层节点传递

• 事件捕获 外层节点先接收事件,然后逐级向内层节点传递

跨浏览器事件处理程序

• 浏览器能力检测 先优先考虑 dom2 级,再兼容 ie,再使用 dom 0 级

<input type="button" value="按钮" id="btn" />
<button id="btn2">按钮2</button>
<input type="button" value="按钮3" id="btn3" />
<script type="text/javascript">
    var eventUtil = {
        // 添加事件
        add:function(e,t,h){
            if(e.addEventListener){
                e.addEventListener(t,h,false);
            }else if(e.attachEvent){
                e.attachEvent('on'+t,h);
            }else {
                e['on'+type] = h;
            }
        },
        // 删除事件
        delete:function(e,t,h){
            if(e.removeEventListener){
                e.removeEventListener(t,h,false);
            }else if(e.detachEvent){
                e.detachEvent('on'+t,h);
            }else{
                e['on'+t] = null;
            }
        }
    }
    eventUtil.add(document.getElementById('btn'),'click',function(){
        console.log(this);
    });
    eventUtil.add(document.getElementById('btn2'),'click',function(){
        console.log(this);
    });
    eventUtil.add(document.getElementById('btn3'),'click',function(){
        console.log(this);
    });
</script>

处理传递的事件对象

function showMsg(event) {
  console.log(event.type); // 事件类型
  console.log(event.target); // 该事件的dom
  console.log(event.srcElement); // 该事件的dom ie
  if (event.stopPropagation) {
    event.stopPropagation(); // 阻止事件冒泡
  } else {
    event.cancelBubble = true; // 阻止事件冒泡 ie
  }
  if (event.preventDefault) {
    event.preventDefault(); // 阻止默认事件行为
  } else {
    event.returnValue = false; // 阻止默认事件行为 ie
  }
}
eventUtil.add(document.getElementById("btn"), "click", showMsg);