初识DOM事件

时间 2019-12-05

标签 dom 事件栏目 HTML 繁體版

原文原文链接

事件流

DOM(文档对象模型)结构是一个树形结构,当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间的路径传播,路径所通过的节点都会收到该事件,这个传播过程可称为DOM事件流浏览器
两种事件流bash
```
<body onclick="bodyClick">
    <div onclick="divClick()">
        <button onclick="buttonClick()">
            <p onclick="pClick()">点击冒泡/捕获</p>
        </button>
    </div>
</body>
复制代码
```
- 事件冒泡流 : 事件开始时由最具体的元素接收,而后逐级向上传播到较为不具体的节点
  - 传播过程: p ==> button ==> div ==> body
- 事件捕获流 : 描述是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件
  - 传播过程: body ==> div ==> button ==> p
    
    (偷波图)
阻止事件冒泡函数
- 事件触发的过程当中,可能会出现事件冒泡的效果,为了阻止事件冒泡
  - e == window.event
  - 1.window.event.cancelBubble = true;(IE特有,谷歌火狐不支持)
  - 2.e.stopPropagation();
- 注:可经过e.eventPhase属性知道当前事件是什么阶段
  - 属性值: 1-->捕获阶段 2-->目标阶段 3-->冒泡阶段
  - 通常默认都是冒泡阶段不多使用捕获阶段
- 拓展: e.preventDefault()阻止事件默认行为
  - 在a标签中使用return false等效于同时调用e.preventDefault()和e.stopPropagation()

事件

事件有三个阶段:
- 1.事件捕获阶段 : 事件从DOM节点自上而下向目标节点传播的阶段
- 2.事件目标阶段 : 真正的目标节点正在处理事件的阶段
- 3.事件冒泡阶段 : 事件从目标节点自上而下向DOM节点传播的阶段

DOM0级事件处理程序

把事件处理函数赋值给一个元素的事件类型(onclick)
- 绑定事件: object.onclick = function(){};
- 解绑事件: object.onclick = null;
注 : DOM0级事件可同时添加多个不一样的事件类型,不可同时添加多个相同的事件类型(后者会覆盖前者)

为同个元素注册多个不一样的事件

element.onclick = f1;  
element.onmouseover = f1;
element.onmouseout = f1;
funtion f1(e){
    switch(e.type){
        case "click":  ;break;
        case "mouseover":  ;break;
        case "mouseout":  ;break;
    }
}
复制代码

DOM2级事件处理程序

用方法为元素绑定(解绑)事件
- 绑定事件
  - object.addEventListener("事件类型",fn,boolen);
    - 参数1:事件类型(没有on)--参数2:事件处理函数(命名函数,匿名函数)
      参数3:可选,控制事件执行阶段(false为事件冒泡阶段,true为事件捕获阶段)
    - 谷歌火狐支持,IE8不支持
  - object.attachEvent("事件类型",fn);
    - 参数1:事件类型(有on)--参数2:事件处理函数(命名函数,匿名函数)
    - 谷歌火狐不支持,IE8支持
  - 注:两种兼容的浏览器不一样,addEventListener中的this是当前绑定事件的对象且事件类型是没有on的(click),attachEvent中的this是window且事件类型是有on的(onclick).
- 解绑事件
  - object.removeEventListener("无on事件类型",命名函数,boolen)
  - object.detachEvent("有on事件类型",命名函数);
注:
- 用什么方式绑定事件,就应该用对应的方式解绑事件.解绑事件的时候,要求在绑定事件的时候使用命名函数.
- DOM2级事件可添加多个不一样事件类型,也可同时添加多个相同事件类型

绑定及解绑事件兼容代码

//为任意一个元素绑定事件:元素,事件类型,命名事件处理函数
    function addEventListener(element,type,fn){
        if(element.addEventListener){
            element.addEventListener(type,fn,false);
        }else if(element.attachEvent){
            element.attachEvent("on" + type,fn);
        }else{
            element["on" + type] = fn;    
        }
    }
    
    //为任意一个元素解绑某个事件:元素,事件类型,命名事件处理函数
    function removeEventListener(element,type,fn){
        if(element.removeEventListener){
            element.removeEventListener(type,fn,flase);
        }else if(element.detachEvent){
            element.detachEvent("on" + type,fn);
        }else{
            element["on" + type] = null;
        }
    }
复制代码

------------------------------------------------------记录于 2019.4.17 JavaScript之DOM事件ui