JavaScript的事件详解

时间 2019-11-12

原文原文链接

1.事件流

1）事件冒泡：最具体的元素传递到最不具体的元素html

2）事件捕获：最不具体的元素传递到最具体的元素spa

2.事件处理

1.HTML事件处理 缺点是改了方法名，button的点击事件方法名也要同时修改
<body>
    <div id="div">
        <button id="btn1" onclick="demo1()">按钮</button>
    </div>
    <script>
        function demo1(){
            alert("HTML事件处理");
        }
    </script>
</body>

2.DOm0级事件处理 缺点：同一对象的事件会被覆盖
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        var e = document.getElementById("btn1");
        e.onclick = function(){alert("Dom0级事件处理1")}
        e.onclick = function(){alert("Dom0级事件处理2 覆盖1")}
        function demo1(){
            alert("HTML事件处理");
        }
    </script>
</body>

3.Dom2级处理事件
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        document.getElementById("btn1").addEventListener("click",demo);
        function demo(){
            alert("Dom2级处理事件")
        }
    </script>
</body>

4.IE处理事件  attachEvent IE>9
<body>
    <div id="div">
        <button id="btn1">按钮</button>
    </div>
    <script>
        document.getElementById("btn1").attachEvent("onclick",demo);
        function demo(){
            alert("Dom2级处理事件")
        }
    </script>
</body>

3.事件对象

<body>
    <div id="div">
        <button id="btn1">按钮</button>
        <a id="aid" href="http://www.baidu.com">百度</a>
    </div>

    <script>
        document.getElementById("btn1").addEventListener("click",showType);
        function showType(event){
            alert(event.type);//事件类型
            alert(event.target);//事件目标
            event.stopPropagation();//若是开启,div即没法接收事件.阻止事件冒泡
        }

        document.getElementById("div").addEventListener("click",showDiv)
        function showDiv(){
            alert("div");
        }

        document.getElementById("aid").addEventListener("click",showA)
        function showA(event){
            event.preventDefault();//阻止事件默认行为
        }
    </script>
</body>