JavaScript学习笔记之事件对象_对象-回调函数-事件绑定的学习笔记-优快云博客

本文介绍了DOM事件中事件对象的使用方法，包括如何通过事件对象获取事件类型、触发事件的元素、键盘按键状态等信息，并展示了如何阻止事件冒泡及元素的默认行为。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

    <!-- 事件对象(event)：在触发DOM事件的时候都会产生一个事件对象。 -->

    <div id="div">
        <button id="btn">按钮</button>
        <a id="aid" href="http://www.baidu.com">百度</a>
    </div>
    
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.addEventListener("click", demo1);

        var aid = document.getElementById("aid");
        aid.addEventListener("click", demo2);

        var div = document.getElementById("div");
        div.addEventListener("click", demo3);

        function demo1(event) {         // event：事件对象；
            alert(event.type);          // type：事件类型(click)；
            alert(event.target);        // target：触发事件的元素(button)；
            alert(event.altKey);        // altKey：事件触发时，“alt”键是否被按下；
            alert(event.button);        // button：事件触发时，哪个鼠标按钮被点击；
            alert(event.clientX);       // clientX：事件触发时，鼠标点击位置的水平坐标（客户区）；   
            alert(event.clientY);       // clientX：事件触发时，鼠标点击位置的垂直坐标（客户区）；
            alert(event.screenX);       // clientX：事件触发时，鼠标点击位置的水平坐标（整个屏幕区）；
            alert(event.screenY);       // clientX：事件触发时，鼠标点击位置的垂直坐标（整个屏幕区）；

            event.stopPropagation();    // 阻止事件冒泡；
        }
        function demo2(event) {
            event.stopPropagation();    // 阻止事件冒泡；
            event.preventDefault();     // 阻止元素的默认行为；a标签的默认行为是跳转，阻止默认行为就是不跳转。
        }
        function demo3() {              // 事件冒泡
            alert("我是div");
        }
    </script>
</body>
</html>