事件源对象

<button>按钮1</button>
    <!-- function里面可以使用arguments来获取参数数组 -->
    <script>
        document.getElementsByTagName('button')[0].onclick = function () {
            //获取参数,对应的arguments里面只有一个参数,这个参数类型为pointerEvent
            //pointerEvent:坐标事件源
            console.log(arguments);
            //鼠标事件
            console.log(arrguments[0]); //获取的是一个pointerEvent,可以获取坐标x:19 y:20就是鼠标坐标
            console.log(arrguments[0].x) //x坐标
            console.log(arrguments[0].y) //y坐标
            console.log(arrguments[0].target) //获取触发的元素
            console.log(arrguments[0].type) //获取触发的事件
            //鼠标按键是哪边的 0左边1滚轮2右边
            console.log(arrguments[0].button);//
            //加在键盘事件
            console.log(arrguments[0].altKey) //是否按了alt键,是返回ture.否返回false
            console.log(arrguments[0].shiftKey) //是否按了shift键,是返回ture.否返回false
            console.log(arrguments[0].ctrlKey) //是否按了ctrl键,是返回ture.否返回false
            //arguments[0]其实是拿到了对应的事件源对象
            //window.event就是内置的事件源对象
            //KeyboardEvent就是键盘的事件源对象
            window.onkeyup = function (e) {
                console.log(e);
                console.log(window.event); //window.event的对象就相当于这个e
                e = e || window.event //window.event写后面就是事件源对象的常用写法
                console.log(e.code);//获取按下的键
                console.log(e.altKey);
            }
        }



        
    </script>

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }
    </style>
    <div></div>

<script>
    // var div=document.getElementsByTagName('div')
    // //鼠标事件源对象
    // div.onmousedown=function(e){
    //     e=e||window.event//e表示鼠标源对象
    //     //鼠标点击  0表示左键,1表示滚轮,2表示右键
    //     console.log(e.button);
    //     console.log(e.target);//目标元素    显示的是div
    //     console.log(e.type);//事件类型  click
    //     console.log(e.x);//获取鼠标的x坐标  基于可视区域
    //     console.log(e.y);//获取鼠标的y坐标  基于可视区域
    //     console.log(e.pagex);//获取鼠标的x坐标  基于页面可视区域
    //     console.log(e.pagey);//获取鼠标的y坐标  基于页面可视区域
    //     console.log(e.offsetX);//鼠标的x,基于div左上角偏移的x(不会计算margin)
    //     console.log(e.offsetY);//鼠标的y,基于div左上角偏移的y(不会计算margin)
    //     console.log(e.screenX);//获取屏幕上的x
    //     console.log(e.screenY);//获取屏幕上的y
    //     console.log(e.clientX);//获取当前可视区域的鼠标的x(会计算margin)
    //     console.log(e.clientY);//获取当前可视区域的鼠标的y(会计算margin)
    //     console.log(e.path);//元素路径
    //     console.log(e.ctrlKey);//判断是否按着ctrl键 按着为ture  松开为false
    //     console.log(e.shiftKey);//判断是否按着shift键   按着为ture  松开为false
    //     console.log(e.altlKey);//判断是否按着alt键  按着为ture  松开为false
    // }
    //键盘事件源对象
    window.onkeydown=function(e){
        e=e||window.event
        //console.log(e.button);
        //console.log(e.target);//目标元素    显示的是body
        //console.log(e.type);//事件类型  keydown
        console.log(e.key);//获取按键值
        console.log(e.code);//获取按键
        //console.log(e.keycode);//获取按键ascii码    不区分大小写    值返回为大写
        // console.log(e.ctrlKey);//判断是否按着ctrl键 按着为ture  松开为false
        // console.log(e.shiftKey);//判断是否按着shift键   按着为ture  松开为false
        // console.log(e.altlKey);//判断是否按着alt键  按着为ture  松开为false
        // console.log(e.charCode);//字符编码,只有按字符的时候才有,一般加给keypress事件
    }
    //在弹起之前,按下之后 针对字符按键
    // window.onkeypress=function(){
    //     console.log('调用了');
    //     console.log(e.charCode);//字符编码,只有按字符的时候才有,一般加给keypress事件    区分大小写

    // }
</script>