js dom元素事件处理简单介绍

本章节比较综合的介绍一下javascript中中dom事件的相关知识，需要的朋友可以做一下参考。

一.事件流:

（1）.事件冒泡:事件最开始由最具体的元素接收，然后逐渐冒泡上升到最外层父元素。

（2）.事件捕获:最外层的节点更早接收到事件,而最具体的节点最后接收到事件。

二.事件处理程序:

（1）.HTML事件处理程序:

缺点:HTML和JS代码紧密的耦合在一起。

代码如下:

<input type="button" value="按钮" onclick="showMessage()">

（2）.DOM0级事件处理程序:

较传统的方式:把一个函数赋值给一个事件的处理程序属性,用的比较多。

优点:简单/跨浏览器。

<input type="button" value="按钮" id="btn2">
<script>
  var btn2 = document.getElementById('btn2'); //取得btn2按钮对象;
  btn2.onclick = function () { //给btn2添加onclick属性;
    alert('这是通过DOM0级添加的事件!');
  }
  btn2.onclick=null;//删除onclick属性;
</script>

（3）.DOM2级事件处理程序:

DOM2级事件定义了两个方法:用于处理指定和删除事件处理程序的操作。

addEventListener()和removeEventListner()。

接收三个参数:要处理的事件名/事件处理函数和布尔值。

在IE8以下不起作用。

<input type="button" value="按钮" id="btn3">
<script>
  var btn3 = document.getElementById('btn3');
  btn3.addEventListener('click',showMessage,false);//添加事件程序;
  btn3.addEventListener('click',function(){//添加多个事件程序;
    alert(this.value);
  },false);
  btn3.removeEventListener('click',showMessage,false);//删除事件程序;
</script>

（4）.IE8和IE8以下事件处理程序及跨浏览器:

接收两个参数:事件处理函数名称和事件处理函数:

var btn3 = document.getElementById('btn3');
btn3.attachEvent('onclick',showMessage);//添加事件;
btn3.detachEvent('onclick',showMessage);//删除事件;

浏览器兼容:

//将添加和删除事件处理程序封装到对象中并赋值给变量'eventUtil';
var eventUtil = {
  //添加句柄
  addHandler:function(element,type,handler){
    //判断DOM2级事件处理程序;
    if(element.addEventListener){  
      element.addEventListener(type,handler,false);
    //判断IE浏览器;
    }else if(element.attachEvent){
      element.attachEvent("on"+type,handler);
    //使用DOM0级事件处理程序;
    }else{
      element['on'+type] = handler;
    }
  };
  //删除句柄
  removeHandler:function(element,type,handler){
    //判断DOM2级事件处理程序;
    if(element.removeEventListener){  
      element.removeEventListener(type,handler,false);
    //判断IE浏览器;
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    //使用DOM0级事件处理程序;
    }else{
      element['on'+type] = null;
    };
  };
};
//跨浏览器添加事件处理程序;
eventUtil.addHandler(btn3,'click',showMessage);

三.事件对象:

（1）.DOM中的事件对象:

在触发DOM上的事件时都会产生一个对象==event。

1.type == 获取事件类型。

2.target == 获取事件目标。

3.stopPropagation() == 停止事件冒泡。

4.preventDefault() == 阻止事件的默认行为。

function showMes(event){
  alert(event.type);//onclick;点击事件;
  alert(event.target.nodeName); //INPUT;input按钮被触发;
  event.stopPropagation();//停止事件冒泡;
}
<a href="event.html" onclick="stopGoto();">跳转</a>
function stopGoto(event){
  event.preventDefault();//阻止默认行为;
}

（2）.低版本IE中的事件对象:

1.type == 同上。

2.srcElement属性 == 获取事件目标。

3.cancleBubble属性 == 阻止冒泡;设置true表示阻止冒泡,false为不组织冒泡。

4.returnValue属性 == 用于阻止事件的默认行为。

function showMes(event){
  //非IE用event,IE8以下用window.event;
  event = event || window.event;  
  //事件目标兼容;
  var ele = event.target || event.srcElement;
  //兼容阻止事件冒泡;
  if(event.stopPropagation){
    event.stopPropagation();
  }else{
    event.cancleBubble();
  };
  //兼容取消事件默认行为;
  if(event.preventDefault){
    event.preventDefault();
  }else{
    event.returnValue = false;
  }
}