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事件思维导图笔记