DOM事件研究

标签：

一、事件流

1.1 事件冒泡

事件是文档或浏览器窗口中发生的特定的交互瞬间。

事件流： 描述的是从页面中接受事件的顺序（IE: 事件冒泡流 / Netscape事件捕获流）

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

1.2 事件捕获

事件捕获：与事件冒泡是截然相反的，它的定义是不太具体的节点应该更早的接收到事件，而最具体的节点最后接收到事件。

二、 事件处理程序

2.1 html事件处理程序

html事件处理程序，现在不建议使用。 事件直接加在html代码中。缺点是：html和js代码高度耦合，如果修改，就要修改两个地方：html元素和JavaScript函数。

2.2 DOM0级事件处理程序（用的比较多）

先把元素取出来，然后为其属性添加一个事件的方法叫做DOM0级处理程序。

它是一种较传统的方式，把一个函数赋值给一个事件处理程序的属性。

优点：简单，跨浏览器的优势。

1 var btn2 = document.getElementById("btn2");       //先取出元素，定义对象
2     btn2.onclick =  function(){alert(‘这是通过DOM0级添加的事件！‘)}   //让事件以对象属性的形式出现
3     btn2.onclick = null;   //删除onclick属性

2.3 DOM2级事件处理程序

DOM2事件 定义了两个方法：

adEventListener() 添加事件

removeEventListener() 移除事件

三个参数设置： 事件名称，处理方法（函数），布尔值---冒泡(false)或捕获(true)

btn3.addEventListener(‘click‘,showMes,false)

注意：

1、 若事件名称有on,则需去掉on。 onclick---->click , onmouseover----->mouseover等等；

2、 false兼容所有浏览器 ----事件冒泡流。

3、 通过addEventListener添加的事件只能通过removeEventListener来删除。  // 参数要一样

btn.removeEventListener(参数)必须和btn.addEventListener(参数)  //删除事件，参数要一致

与DOM0级共同优点：可以给一个属性或事件上绑定多个函数，会按照顺序执行。

btn3.addEventListener(‘click‘,showMess,false);

缺点：DOM2级事件处理程序，不被IE支持，IE有专用的事件处理程序。

2.4 IE事件处理程序

IE也提供了类似DOM0级和DOM2级事件处理程序

attachEvent()  //添加事件

deatchEvent()  //删除事件

接收两个相同的参数，事件处理程序的名称和事件处理程序的函数。

去掉了布尔值，不适用第三个参数的原因：--IE8及更早版本只支持事件冒泡

btn3.attachEvent(‘onclick‘,showMes);  //注意，在IE事件处理程序中，要把on加上
btn3.deatchEvent(‘onclick‘,showMes);  //支持IE事件处理程序的浏览器主要有 IE和Opera

*封装跨浏览器事件处理程序*

//删除句柄
removeHandler：function(elemnt,type,hanler){
  if(elemnt.removeEventListener){    //处理DOM2级处理事件
    elemnt.removeEventListener(type,hanler,false);
  }else if(element.deatchEvent){    //处理IE事件
    element.deatchEvent(‘on‘+type,hanler);
  }else{
    element[‘on‘+type] = null;
  }
}

三、 事件对象

3.1 DOM中的事件对象

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

事件对象event

1、type属性 用于获取事件类型

2、target属性 用于获取事件目标

3、stopPropagation()方法   阻止事件冒泡

4、preventDefault()方法   阻止事件的默认行为 

DOM事件对象：

event.type / event.srcElement / event.stopPropagation / event.preventDefault

IE8以下事件对象：

event.type / event.target / event.cancelBubble = true / event.returnValue = false

DOM事件研究

标签：

原文地址：http://www.cnblogs.com/d-lion/p/5787228.html