JavaScript---事件详解

事件流

描述的是在页面中接受事物的顺序

接收事物的顺序

• 事件冒泡

　　由最具体的元素接收，然后逐级向上传播至最不具体的元素节点（文档）

• 事件捕获

　　最不具体的节点接收事件，而最集体的节点应该是最后接收事件

事件处理

HTML事件处理

直接添加到HTML结构中

<button id="btn1" onclick="demo()">按钮</button>
<script>
    function demo(){
        alert("Hello");
    }
</script>

 

这种处理方式，存在修改函数名，需要到html中修改事件调用的函数名的问题

DOM0级事件处理

把一个函数赋值给一个事件处理程序属性

解决了HTML事件处理的问题

<button id="btn1">按钮</button>
<script>
    var btn1=document.getElementById(btn1);
    btn1.onclick=function(){
        alert("Hello");
    };//这样写的话，前面的事件会被覆盖
    btn1.onclick=function(){
        alert("Hello2");
    };
    //清除事件
    btn1.onclick=null;
</script>

仍然存在问题，当有多个事件时，前面的事件会被覆盖，只执行最后一个事件处理

DOM2级事件处理

• addEventListener("事件名", "事件处理函数", "布尔值");

　　　　true：事件捕获

　　　　false：事件冒泡

• removeEventListener();

<div id="divid">
    <button id="btn1">按钮</button>
</div>
//这样写就不会覆盖前面的事件
<script>
    var btn1 = document.getElementById(btn1)
    btn1.addEventListener("click", function(){
        alert("Hello")
    });
    btn1.addEventListener("click", function(){
        alert("Hello2")
    });
</script>

 

存在IE8及以下版本不支持该事件处理方法

IE事件处理程序

• attachEvent
• detachEvent

一个支持各浏览器的的事件处理demo

<button id="btn1">按钮</button>
<script>
    var btn1 = document.getElementById("btn1");
    if (btn1.addEventListener){
        btn1.addEventListener("click", demo);
    } else if (btn1.attachEvent){
        btn1.attachEvent("onclick", demo);
    } else {
        btn1.onclick = demo();
    }
    function demo() {
        alert("Hello");
    }
</script>