DOM事件学习笔记

事件流：描述的是从页面中接收事件的顺序

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

<div>
  <input type="button" value="按钮" id="btn" />
</div>//当点击按钮时，浏览器也认为你点击了它的父元素div，同样也认为你点击了div的父元素，逐级向上到html，直到document为止</span>

事件捕获：与事件冒泡截然相反，它认为：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。ie9及chrome，opera，firefox支持

事件处理程序：

HTML事件处理程序：

<input id="btn" type="button" onclick="alert('我是html事件')">点我</input >//当onclick中触发的是js中的一个函数，同样属于html事件</span>

DOM0级事件处理程序：用得最为广泛

document.getElementById('btn').onclick=function(){alert("我是DOM0级事件");}//此为添加事件方法，大部分浏览器支持，用得比较多
document.getElementById('btn').onclick=null;//此为去除事件方法，等价于---document.getElementById("btn")['onclick']=null;</span>

DOM2级事件处理程序：含两个方法--addEventListener()和removeEventListener()，它们均有三个参数：要处理的事件名、作为事件处理程序的函数和布尔值（false遵循事件冒泡，true遵循事件捕获，一般用false）

var showMSGfunction(event){alert('我是DOM2级事件')};
document.getElementById('btn').addEventListener("click",showMSG,false);//添加事件，事件名必须去掉前边的“on”
document.getElementById('btn').removeEventListener("onclick",showMSG,false);//删除事件（通过DOM2级添加的事件必须用DOM2级的方法删除事件），可以添加多个事件处理程序的函数（根据顺序依次触发）</span>

IE事件处理程序：含两个方法--attachEvent()和detachEvent()，他们均只含两个参数：要处理的事件名、作为事件处理程序的函数，默认为事件冒泡

document.getElementById('btn').attachEvent("click",showMSG);//添加事件，事件名必须含有前边的“on”
document.getElementById('btn').detachEvent("click",showMSG);//删除事件</span>

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

DOM中的事件对象：

1，type属性 用于获取事件类型---event.type：点击事件，滑过事件等；

2，target属性 用于获取事件目标---event.target：知道所触发的事件来自于哪个元素；

3，stopPropagation()方法 用于阻止事件冒泡，如下：

<div onclick="alert(222)">
  <input type="button" value="按钮" onclick="show()" />
</div>//点击了按钮时，也会弹出div的onclick事件
<script>
  var show=function(event){
    alert(event.type);//弹出click
    event.stopPropagation();//阻止事件冒泡，将不再触发div的onclick事件
  }
</script></span>

4，preventDefault()方法 阻止事件的默认行为---event.preventDefault()：可以阻止a标签的跳转

IE中的事件对象：

1，type属性 用于获取事件类型---与DOM一样；

2，srcElement属性 用于获取事件目标---event.srcElement：知道所触发的事件来自于哪个元素；

3，cancelBubble属性 用于阻止事件冒泡，true为阻止，false为不阻止；

4，returnValue属性 用于阻止事件的默认行为，默认为true（不阻止），设置为false（即阻止事件的默认行为）。