Dom事件探秘

• time: 2016-01-19 17:30

一.理解事件流

1.含义：

    描述的是从页面中接受事件的顺序.

2. 事件冒泡

    描述事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。（IE,chrom,火狐等大部分浏览器使用）

3.事件捕获

    描述事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。（Netscape的事件流是事件捕获流）

---

二.使用事件处理程序

1.HTML事件处理程序

    在html结构中直接写入事件处理程序，缺点时html和js耦合太紧密，很难修改。

<input type="button" value="按钮" id="btn" onclick="alert('hello')">

2.Dom0级事件处理程序

    方法：函数赋值 element.onclick=function()（只能为一个元素添加一个事件处理函数）

 var btn2=document.getElementById('btn2');
 btn2.onclick=function(){
    alert('这是通过Dom0级添加的事件！');
 }

3.Dom2级事件处理程序

 var btn3=document.getElementById('btn3');

 btn3.addEventListener('click',showMes,false);
 btn3.removeEventListener('click',showMes,false);

• element.addEventLIistener()：添加事件，必须用removeEventListener删除
• element.removeEventListener()：删除事件，参数必须与addEventListener  相同
• 上述两个方法接受3个参数：要处理的事件类型（不加on），作为事件处理程序的函数和布尔值
• Dom0heDom2可以在一个节点元素上添加多个事件

4.IE事件处理程序

• element.attachEvent()：添加事件
• element.detachEvent()：删除事件
• 接受两个参数：要处理的事件类型type（要加on）和事件处理程序函数，不使用布尔值是因为IE8及更早的版本只支持实事件冒泡（语法注意： .等价于［］）

前四种事件处理程序代码截图如下：

####5.跨浏览器的的事件处理程序

• 把能力测试函数封装到单独的变量对象中（可以单独存在一个文件中留以后备用）
  

---

三.事件对象

1.Dom 中事件对象

• .type属性：获取事件属性
• .target属性：获取事件目标
• .stopPropagation()方法用于阻止事件冒泡
• .preventDefault()方法阻止默认行为

2.IE中的事件对象

• .type属性：获取事件属性
• .srcElement属性:获取事件目标
• .cancelBubblE属性:用于阻止事件冒泡，true表示阻止冒泡，false不阻止冒泡表示
• .returnValue 属性：用于阻止事件的默认行为，设置false表示阻止事件的默认行为

3.浏览器兼容问题

• 根据能力判断将函数封装到单独的变量中(类似上一节二.5)

4.Dom事件思维导图笔记