JavaScript 事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        body{

            height:1000px;

        }
        #ccc{
            width:200px;
            height:200px;
            margin:100px;
            margin-top:500px;
            background-color:orange;
        }
    </style>
</head>
<body>
    <input type="button" id="box" value="点击按钮">

    <input type="button" id="dddd" value="按钮dddd">

    <input type="button" id="yyy" value="按钮yyy">

    <div id="ccc"></div>
<script>
    //获取元素
    var box = document.getElementById("box");

    var dddd = document.getElementById("dddd");

    var yyy = document.getElementById("yyy");

    var ccc = document.getElementById("ccc");

    box.onclick = function(e){
        //e指的就是存储事件对象的参数，只要事件被触发，e就会自动接收数据
        //兼容写法
        e = e || window.event;
        //e.eventPhase 判断出事件执行时处于哪个阶段
        //1.捕获阶段
        //2.目标阶段
        //3.冒泡阶段
        console.log(e.eventPhase);
        //返回了2

        //获取真正触发事件的元素
        //兼容写法
        var target = e.target || e.srcElement;
        console.log(target);
        //返回了 id为box的按钮元素

        //获取绑定事件的事件源元素
        console.log(e.currentTarget);
        //返回最外端元素

        //this指向box
        console.log(this);




    };


//e.type 属性获取事件类型
    dddd.onclick = function(e){
        //兼容写法
        e = e || window.event;
        //触发的事件
        console.log(e.type);
        //返回了click
    };



    //更多时候可能给同一个元素对象添加不同的事件类型，对应执行的事件函数内部的代码 不同

//鼠标移到按钮上背景色变为蓝色，移出按钮时变为绿色
/* 
    yyy.onmouseover = function(){
        yyy.style.backgroundColor = "skyblue";
        
    };


    yyy.onmouseout = function(){
        yyy.style.backgroundColor = "yellowgreen";
    };

 */

//可以将所有给一个元素绑定的事件的事件函数写在一个函数内,通过 函数内部的e.type 判断走不同的分支

//避免添加多个函数，占用更多的内存

yyy.onmouseover = fn;
yyy.onmouseout = fn;
//避免添加多个函数，占用更多的内存
function fn(e){
    e = e || window.event;
    //根据事件类型，执行不同的代码
    switch(e.type){

        case "mouseover":
            yyy.style.backgroundColor = "pink";
            break;

            case "mouseout":
                yyy.style.backgroundColor = "yellowgreen";
                break;

    }
    
};


//事件对象中有一些获取尺寸的属性
ccc.onclick = function(e){
//client系列：客户端尺寸，点击的点参考浏览器窗口左上角的距离

console.log("距离浏览器："+e.clientX);
console.log("距离浏览器："+e.clientY);

//page 系列：html 页面尺寸，点击的点参考html文档左上角的距离

console.log("距离html文档："+e.pageX);
console.log("距离html文档："+e.pageY);


};





</script>

</body>
</html>