事件对象 

 var obox = document.querySelector(".box")

    obox.onclick = function(){
        console.log(1)
    }

    // 事件源：obox，触发事件的源头
    // 事件类型：onclick，通过什么行为触发事件
    // 事件处理函数：function，触发这个行为时，要做的事情

    // 事件对象：类似于一个秘书，在本次事件过程中，记录事件发生的所有信息
    // 默认不显示，需要手动获取
    // 只在事件中存在，没开始或结束后，没有事件对象
 var obox = document.querySelector(".box")

    谷歌: // obox.onclick = function(abc){
    //     console.log(abc)
    // }
    IE:// obox.onclick = function(){
    //     console.log(window.event)
    // }
二者兼容：   为什么要搞兼容，因为事件在ie和谷歌的表示方法不一样，有可能在ie显示不出来，ie必须输出window.event。谷歌任意传入个参数，输出这个参数就行

    obox.onclick = function(eve){
        var e = eve || window.event;
        console.log(e)
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{width:100px;height:100px;background: red;}
    </style>
</head>
<body style="height: 1000px">
    <div class="box"></div>
</body>
<script>
    // 事件对象身上的属性？

    var obox = document.querySelector(".box")

     obox.onclick = function(eve){
         var e = eve || window.event;
//         鼠标相对于事件源的坐标
         console.log(e.offsetX) //0
         console.log(e.offsetY) //1

//         鼠标相对于页面的可视区域的坐标
         console.log(e.clientX) //页面往下拉距离就变了
         console.log(e.clientY)

//         鼠标相对于页面的坐标
         console.log(e.pageX)  //就是把页面往下拉，他的距离不会变
         console.log(e.pageY)

//         鼠标相对于屏幕的坐标
         console.log(e.screenX)
         console.log(e.screenY)
 
//         事件类型
         console.log(e.type)  //click
//         跟着事件走
         console.log(e.target) //<div class="box"></div>
//         跟着函数走
         console.log(this) //同上
     }

    obox.onmousedown = function(eve){
        var e = eve || window.event;
         console.log(e.button) 鼠标左键1 右键3 中间2
         console.log(e.buttons) 左右中1,2,4
    }
        
</script>
</html>

 





 







            

            
posted @ 
2019-08-26 17:32 
菜鸟小何 
阅读(229) 
评论(0) 
编辑 
收藏 
举报