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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。