Dom事件流

2017-03-09 本文已影响0人 jasmine_jing

事件流是描述页面接收事件的顺序。

具体的有事件冒泡事件捕获DOM事件流。
1、事件冒泡又叫IE的事件流，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
2、事件捕获的思想是不太具体的节点应该更早的接收到事件，而最具体的节点应该在最后接收到节点。事件捕获的用意在于事件到达预定目标之前捕获它。
3、DOM2级事件流规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和冒泡阶段。首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

Paste_Image.png

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件流</title>
</head>
<body>
    <div>
        <input type="button" id="btn" onclick = "showMessage();" >
    </div>
</body>
</html>

**事件冒泡：顺序(从最先发生--到 ---最外层) input - div - body - html - document **

事件捕获：与事件冒泡相反。document - html - body - div - input

使用事件处理程序

1.HTML事件处理程序

2.DOM0级事件处理程序

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件流</title>
</head>
<body>
    <div>
        <input type="button" id="btn" onclick = "showMessage();" value="按钮" >
        <input type="button" id="btn2" value="按钮2" >
    </div>
    <script>
    //HTML事件处理程序
       function showMessage(){
           alert("HTML事件处理程序");
       }
    //Dom0级事件处理程序
    var btn2 = document.getElementById("btn2");
    btn2.onclick=function(){
        alert("Dom0级事件处理程序");
    }
    </script>
</body>
</html>

3.DOM2级事件处理程序

DOM2j级事件定义了两个方法：
用于处理指定和删除事件处理程序的操作
addEventListener()和removeEventListner().
接受三个参数：要处理的事件名、作为事件处理程序的函数和布尔值
布尔值：false 默认使用事件冒泡；

DOM0级和DOM2级都可以给添加多个处理程序

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>事件流</title>
</head>
<body>
    <div>
        <input type="button" id="btn" onclick = "showMessage();" value="按钮" >
        <input type="button" id="btn2" value="按钮2" >
        <input type="button" id="btn3" value="按钮3" >
    </div>
    <script>
    //HTML事件处理程序
       function showMessage(){
           alert("HTML事件处理程序");
       }
    //Dom0级事件处理程序
    var btn2 = document.getElementById("btn2");
    btn2.onclick=function(){
        alert("Dom0级事件处理程序");
    }
    btn2.onclick = null;//移出btn2的点击事件
    
    //DOM2级事件处理程序
    var btn3 = document.getElementById("btn3");
    btn3.addEventListener("click",showMessage,false);//事件不用加on
    
    //同时添加多个事件处理
    btn3.addEventListener("click",function(){
        alert(this.value);//每一个当前操作的对象 都有一个this 可以用来代替当前对象
    },false);
    //移出事件处理
    btn3.removeEventListen("click",showMessage,false);
    </script>
</body>
</html>

4、IE处理程序

attachEvent()添加事件
detachEvent()删除事件
接受相同的两个参数：事件处理程序的名称和时间处理程序的函数

btn3.attachEvent("onclick",showMessage);//添加
btn3.detachEvent("onclick",showMessage);//移出

5、添加跨浏览器兼容

var EventUtil = {
    // 添加事件监听
    add: function(element, type, callback){
        if(element.addEventListener){                       //Dom2级
            element.addEventListener(type, callback, false);
        } else if(element.attachEvent){                       //IE
            element.attachEvent('on' + type, callback);
        } else {                                                            //Dom0级
            element['on' + type] = callback;
        }
    }
// 删除事件监听
del: function(element, type, callback){
        if(element.removeEventListener){                       //Dom2级
            element.removeEventListener(type, callback, false);
        } else if(element.detachEvent){                       //IE
            element.detachEvent('on' + type, callback);
        } else {                                                            //Dom0级
            element['on' + type] = null;
          //注意这里的写法 element.[onclick]===element.onclick;
        }
    }
}
//调用部分
function showMessage(){
  alert("方法调用");
}
btn=document.getElementById("btn");

EventUtil.add(btn,click,showMessage);