Dom事件初步了解

1.事件流

事件流可以分为两种：事件冒泡和事件捕获

1. 事件冒泡就是从目标元素一直冒泡到根元素html（IE和DOM浏览器都有）

2. 事件捕获就是从根元素到目标元素（DOM浏览器支持）

 

2.事件处理

1.HTML的事件处理，如下

<div class="btn" onclick="showME()">点击我</div>

把点击事件放入到标签内部这样不好就是行为和建构耦合在一起了，不好维护

 

2.DOM0级的事件处理

 <div class="btn" id="btn">点击我</div>

<script>

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

   btn.onclick = function(){

    //代码

   }

// 取消点击

 //  btn.onclick = null;

</script>

这个是把点击事件和结构分离了，这个不能给一个元素绑定多个点击事件，存在把之前合作同事的代码覆盖掉

3.DOM2级事件处理

<div class="btn" id="btn">点击我</div>

<script>

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

   btn.addEventListener('click',function(){

    //代码

   },false);

  //取消点击事件

  // btn.removeEventListener('click',function(){},false);

</script>

这样可以给元素绑定多个点击事件。好维护上面这些事DOM浏览器的，IE大家可以去查询一下attachEvent,detachEvent

 

3.Event 了解

DOM浏览器

event.type 属性就是事件类型

event.target 目标元素

event.stopProgation() 方法，是阻止冒泡的

event.preventDefault()方法，是阻止元素事件的默认行为如a标签

 

IE下

event.type 属性是事件类型

event.srcElement 目标元素

event.cancelBubble 属性 阻止冒泡

event.returnValue 属性  false是阻止事件默认行为