DOM 事件类

DOM事件的级别：

　　DOM级别一共可以分4个级别：DOM0级、DOM1级、 DOM2级 、DOM3级。而DOM事件级别分为3个级别：DOM0级事件处理、DOM2级事件处理、DOM3级事件处理

　　1. DOM0级事件：

　　　　通过onclick 进行事件绑定

　　　　事件绑定：element.onclick=function(){}

　　　　事件解绑：element.onclick = null;

　　2. DOM2级事件：

　　　　DOM2级事件定义了addEventListener 和 removeEventListener两个方法，分别表示绑定和解绑事件。

　　　　addEventListener 方法中有三个参数，分别为：事件名、处理函数 和 是否在捕获时执行事件处理函数。其中，第三个参数为可选的。false（默认）: 表示冒泡阶段，true: 表示捕获阶段

　　　　事件绑定：element.addEventListener('click',function(){},false) 

　　　　　　　　　　element.attachEvent('click',function(){}) // IE8及以下版本  attachEvent不需要第三个参数，因为IE8及以下版本只支持冒泡事件

　　　　事件解绑：element.removeEventListener('onclick',function(){},false)

　　　　　　　　　　element.detachEvent('onclick',function(){}) // IE

　　3. DOM3级事件：

　　　　DOM3级事件在DOM2级事件的基础上添加了事件类型，如 鼠标事件 、键盘事件、滚轮事件等等

DOM事件模型：捕获（从上往下传播，直到目标元素） + 冒泡（从目标元素开始向上传播，直到window）

DOM事件流（或者事件传播）：

　　捕获阶段  -> 目标阶段 ->冒泡阶段

描述DOM事件捕获的具体流程：

　　在事件的捕获阶段，从window开始一层层往下传播，即：window -> document -> html ->body  ->目标元素 

　　下面通过代码来查看，捕获阶段的具体流程，下面代码中分别绑定了 目标元素、body、html、window、document  点击事件

<div id="ev">
    目标元素
</div>
<script>
    var ev = document.getElementById('ev');
    ev.addEventListener('click',function(){
        console.log('ev');
    },true);
    //window
    window.addEventListener('click',function(){
        console.log('window');
    },true);

    //document
    document.addEventListener('click',function(){
        console.log('document');
    },true);
    
    //html
    document.documentElement.addEventListener('click',function(){
        console.log('html');
    },true);
    
    //body
    document.body.addEventListener('click',function(){
        console.log('body');
    },true);
</script>

控制台打印结果顺序为：

 

 

　如果注册的冒泡事件，打印的顺序就会反过来 ev -> body -> html ->document ->window　　　　　　　　

Event对象的常见应用：

　　阻止默认事件：envent.preventDefault()

　　阻止冒泡：event.stopPropagation()

　　当前所绑定事件的元素：event.currentTarget

　　被点击的元素：envent.target

　　event.stopImmediatePropagation()： 如果某个元素注册了多个相同事件时，多个事件监听函数会按照顺序依次执行。如果某个执行函数执行了 evnet.stopImmediatePropagation()方法，则后续的同类型事件将被阻止

自定义事件:

　　1. new Event():

　　　　代码如下：

<div id="ev">
    目标元素
</div>
<script>
    var element = document.getElementById('ev');
    //自定定义事件，名为 alert
    var alertEvent = new Event('alert');
    //为元素绑定 自定义的alert事件
    element.addEventListener('alert',function(event){

console.log(event.detail); //undefined  因为event没有detail这个属性

},false); /*1s钟后触发事件*/ setTimeout(function(){ //让元素触发自定义的事件  element.dispatchEvent(alertEvent); },1000); </script>

 

　　new Event() 不能传参数，如果要传参数就要使用下面的方法

 

　　2. new CustomEvent():

　　　　new CustomEvent() 的event对象多了一个detail属性，我们可以把参数放到detail属性里。这样就可以直接通过event.detail 就可以或得我们要的参数

　　　　代码如下：

<div id="ev2">
    目标元素
</div>
<script>
    var element = document.getElementById('ev2');
    //自定定义事件，名为 alert
    var alertEvent = new CustomEvent('alert',{'detail':'ceshi'});
    //为元素绑定 自定义的alert事件
    element.addEventListener('alert',function(event){
       console.log(event.detail); //ceshi
    },false);

    /*1s钟后触发事件*/
    setTimeout(function(){
        //让元素触发自定义的事件
        element.dispatchEvent(alertEvent);
    },1000);

</script>