《中级前端1.6》JavaScript事件详解——DOM0,DOM2,IE事件,事件冒泡

JavaScript的事件处理可以完美的兼容各种浏览器的事件处理。

 

JS事件详解-事件流

使用中用的最多的就是事件冒泡，而且是对任何浏览器都兼容的。

 

JS事件详解-事件处理

1、HTML事件处理：

<div id="div">
    <button id="btn1" onclick="domo()">按钮</button>
</div>
<script>
    function demo() {
        alert("Hello html事件处理");
    }
</script>

弊端：如果函数名称被修改了，那么要修改html文档中的很多处。

 

2、DOM0级事件处理：

<div id="div">
    <button id="btn1">按钮</button>
</div>
<script>
    var btn1 = document.getElementById("btn1");
    btn1.onclick = function() {
        alert("Hello DOM0级事件处理1");
    }
    btn1.onclick = function() {
        alert("Hello DOM0级事件处理2");
    }
</script>

弊端：DOM0级事件处理不能灵活添加事件，如上所示，第二次设置onclick后，将覆盖掉第一次的onclick。

 

3、DOM2级事件处理：

<div id="div">
    <button id="btn1">按钮</button>
</div>
<script>
    var btn1 = document.getElementById("btn1");
    btn1.addEventListener("click", demo1);
    btn1.addEventListener("click", demo2);
    btn1.removeEventListener("click", demo1);

    function demo1() {
        alert("1");
    }

    function demo2() {
        alert("2");
    }
</script>

优点：处理事件非常灵活。

IE8及以下不支持addEventListener，IE所用的函数名称是attachEvent和detachEvent，参数和用法与addEventListener一样，所以如果项目需要支持低级IE浏览器且不用jQuery，我们可以手动写出如下兼容程序：

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

    function demo() {
        alert("1");
    }

    function demoie() {
        alert("ie1");
    }
</script>

注意，ie中不是click而是onclick

 

JS事件详解-事件对象

<div id="div1">
    <button id="btn1">按钮</button>
    <a href="http://www.baidu.com/" id="aid">百度</a>
</div>
<script>
    var btn1 = document.getElementById("btn1");
    btn1.addEventListener("click", showType);
    var div1 = document.getElementById("div1");
    div1.addEventListener("click", showDiv);

    function showType(e) {
        //alert(e.type);
        alert(event.target);
        event.stopPropagation(); //阻止事件冒泡
    }

    function showDiv(e) {
        alert("div");
    }
    var a1 = document.getElementById("aid");
    a1.addEventListener("click", showA);

    function showA(e) {
        alert("a");
        event.stopPropagation(); //阻止事件冒泡
        event.preventDefault(); //阻止默认行为
    }
</script>