事件对象

事件对象

一、事件侦听与删除侦听

ie9以上

添加事件：element.addEventListener(‘事件名’,事件函数名,事件冒泡/捕获)

    事件类型（事件名）：必须是字符串，可以设置为任意字符串，但是部分字符串是系统事件类型
    
    事件回调函数（事件函数名）：指向一个函数，当收到事件时执行该函数，如果没有收到则不执行函数。写侦听事件时不执行函数。
    
    是否捕获时执行（事件冒泡/捕获）：默认值是false，在冒泡时执行，捕获时不执行。如果设置为true，则在捕获时执行

移除事件：element.removeEventListener(‘事件名’,事件函数名,事件冒泡/捕获)

ie8及以下

添加事件：element.attachEvent(‘on开头的事件名’,事件函数名)
移除事件：element.detachEvent(‘on开头的事件名’,事件函数名)

1.事件侦听和抛发--必须先侦听,再抛发

事件可以分为：系统事件、自定义事件

    例：
    document.addEventListener("天王盖地虎",anhaoHandler);
    var  evt=new Event("天王盖地虎");//new Event()指创建一个事件对象
    evt.a=10;//为事件对象添加一个属性，属性值
    document.dispatchEvent(evt);//向document抛发事件

    function anhaoHandler(e){
        //e 是一个事件对象,侦听事件收到消息时获得的事件对象
        console.log(e===evt);//结果为true
        console.log(e.a);//10
    }

二、事件原理

事件冒泡(event bubbling)，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

子标签发生事件后,向父级发送该事件,一直追溯到document。如:点击一个嵌套在 body中的button,则该button的onclick事件也会传递给body、document中,触发他们 的onclick里触发的函数。

分为三个阶段：

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

三、取消冒泡事件

标准浏览器下 DOM中 : 
	event.stopPropagation()   取消冒泡
IE8及以下：         
	event.cancelBubble=true   取消冒泡

案例：

<div class="div0">
    <div class="div1">
        <div class="div2"></div>
    </div>
</div>

<script>
    var div0=document.querySelector(".div0");
    var div1=document.querySelector(".div1");
    var div2=document.querySelector(".div2");

    div0.addEventListener("click",clickHandler0);
    div1.addEventListener("click",clickHandler1);
    div2.addEventListener("click",clickHandler2);

    function clickHandler0(e){
        console.log("点击div0")
    }

    function clickHandler1(e){
        console.log("点击div1")
    }

    function clickHandler2(e){
        console.log("点击div2")
        // 停止冒泡
        e.stopPropagation();
        // 仅适用在IE8及以下
        // e.cancelBubble=true;
    }
</script>

//以上函数若是不执行停止冒泡，则在点击div2时，也会执行0，1
//在div2处停止冒泡，则不会再执行0，1