事件分类与对象event

1.事件的分类

鼠标事件

 box.onmousedown =  function(){
            console.log('鼠标按下了');
        }
        box.onmouseup =  function(){
            console.log('鼠标弹起了');
        }
        box.onmouseout =  function(){ 
            console.log('鼠标移出了');
        }
        box.onmouseover = function(){
            console.log('鼠标移进了');
        }
        box.onmousemove = function(){
            console.log('鼠标移动了');
        }
        box.onmouseleave = function(){
            console.log('鼠标取消悬停了');
        }
        box.onmouseenter = function(){
            console.log('鼠标悬停了');
        }

键盘事件

 window.onkeydown = function(){
            console.log('键盘按下');
        }
        window.οnkeyup= function(){
            console.log('键盘弹起');
        }
        window.onkeypress = function(){
            console.log('按下之后弹起之前');
        }

html事件

// 页面加载事件 默认触发的 执行一次
        window.onload = function(){
            console.log('页面加载了');
        }
        //onsubmit事件 提交按钮触发的事件 一般触发的元素是表单form
        document.getElementById('form').onsubmit = function () { 
            console.log('提交了');
         }
        //失去焦点 onblur  获取焦点 onfocus （常用于input）
         document.getElementById('input').onfocus = function(){
             console.log('获取焦点');
         }
         document.getElementById('input').onblur = function(){
             console.log('失去焦点');
         }
//重点 onchange 修改 当里面的值value发生变化以后 失去焦点的时候触发 加给表单元素
        text.onchange = function(){
            console.log('修改事件');
        }
        //onscroll 滚动栏滚动 重点 
        window.onscroll = function(){
           var scroll = document.documentElement.scrollTop ||                           document.body.scrollTop
            console.log(scroll);
        }
        //onselect 选择 （一般用于复制粘贴 input textarea） 半重点
        var textarea = document.getElementById('textarea')
        textarea.onselect = function(){
            console.log('选择了');
        }
        //unload 卸载 页面被卸载的时候 组件被卸载
        window.unload = function(){
            console.log('页面卸载了');
        }
        //reset 重置的时候 加给form
        document.getElementsByTagName('form')[0].onreset = function(){
            console.log('重置');
        }

2.event相关属性

 //event的相关属性
        var div = document.getElementsByTagName('div')[0]
        //鼠标的事件源对象
        div.onmousedown = function(e){
            e = e || window.event //e表示事件源对象
            //鼠标点击的键 button 0表示左键 1表示滚轮 2表示右键
            console.log(e.button);//1
            console.log(e.target); //目标元素 显示是div 2
            console.log(e.type); //事件类型 click 3
            console.log(e.x); //获取鼠标的x坐标 基于可视区域 4
            console.log(e.y); //获取鼠标的y坐标 基于可视区域 5
            console.log(e.pageX); //获取鼠标的x坐标 基于页面的可视区域 6
            console.log(e.pageY); //获取鼠标的y坐标 基于页面的可视区域 7
            console.log(e.offsetX); //获取鼠标的x坐标 基于div偏移的x 离div这个盒子的左上角顶点（不会计算margin） 8
            console.log(e.offsetY); //获取鼠标的y坐标  基于div偏移的y  离div这个盒子的左上角顶点 9
            console.log(e.screenX); //screen获取屏幕信息 在屏幕上的x 10
            console.log(e.screenY); //screen获取屏幕信息 在屏幕上的y 11
            console.log(e.clientX) //获取鼠标的x坐标 基于当前可视区域的x  12
            console.log(e.clientY) //获取鼠标的x坐标 基于当前可视区域的y  13
            console.log(e.path) //元素路径 
            console.log(e.ctrlKey); //判断是否按着ctrl键 按着为true 没有为false 14
            console.log(e.shiftKey); //判断是否按着shift键 15
            console.log(e.altKey); //判断是否按着alt键 16
        }
​
        //键盘的事件源对象
        window.onkeydown = function(e){
            e = e || windwo.event
            console.log(e.key); //获取按键的值 17
            console.log(e.code); //获取按键 18
            console.log(e.keyCode); //获取按键的ascii码 不区分大小写（只返回大写）19
            console.log(e.ctrlKey); //判断是否按着ctrl键 按着为true 没有为false
            console.log(e.shiftKey); //判断是否按着shift键
            console.log(e.altKey); //判断是否按着alt键
            console.log(e.charCode); //字符编码 只有在按字符的时候才有 一般是加给keypress事件
            console.log(e.target); //目标元素 显示是body
            console.log(e.type); //事件类型 keyDown
        }
        //在弹起之前按下之后 针对字符按键  charCode只在这里有效（其他按键不会执行）
        window.onkeypress = function(e){
            console.log('调用了');
            console.log(e.charCode); //他会返回对应的字符的编码 ascii码   区分大小写 20
        }

3.事件源对象

  document.getElementsByTagName('button')[0].onclick = function(){
            //获取参数 发现对应的arguments里面只有一个参数 这个参数类型为 pointerEvent
            //这个pointerEvent是什么？ 坐标事件源
            console.log(arguments);
            console.log(arguments[0]); //获取的是一个pointerEvent 可以获取坐标 x: 34 y: 18 就是我们鼠标的坐标
            //鼠标事件中
            console.log(arguments[0].x); //x坐标
            console.log(arguments[0].y); //y坐标
            console.log(arguments[0].target); //获取触发的元素
            console.log(arguments[0].type); //触发的事件
            //加在键盘事件
            console.log(arguments[0].altKey); //是否按了alt键 是返回true不是返回false
            console.log(arguments[0].shiftKey); //是否按了shift键 是返回true不是返回false
            console.log(arguments[0].ctrlKey); //是否按了ctrl键 是返回true不是返回false
            //这个arguments[0]其实是拿到了我们对应的事件源对象 
            //但是像上面这样写太长了 所以我们有内置的事件源对象 window.event
            // 鼠标按下的是那边的 0左 1滚轮 2右
            console.log(arguments[0].button);
​
        }
        //KeyboardEvent的事件源对象 键盘事件源 他也是个event
        window.onkeyup = function(e){ //e是形参 随便写 一般建议写e（规范）
            // console.log(arguments[0]); e是不是就相当于arguments[0] //获取第一个参数
            console.log(e);
            console.log(window.event); //window.event的对象其实就是这个e
            e = e || window.event //window.event写后面 拿到的就是事件源对象 常用写法
            console.log(e.code); //获取你按下的键
            console.log(e.key); //获取你按下键的值
            console.log(e.keyCode); //获取按键的ascii吗
            console.log(e.altKey); //是否按下的是alt键 不常用
            console.log(e.shiftKey); 
            console.log(e.ctrlKey); 
        }