事件

概述：

事件是一个流程，就是一个监听（预备）一个触发（当前内容执行了（进行处理）用户在页面上操作（监听这个操作），然后我们要调用函数来处理（进行处理）。

监听过程--触发过程--处理过程 这个流程就是完整的一个事件

事件的模式

内联模式

<div onclick="方法名（）"></div>

脚本模式

document.queryselector('div').onclick = function(){
//操作

}//他也会被解析

内联里面调用的方法的this会指向window（传递this）脚本模式的this会指向当前的调用者。

事件的分类：

鼠标事件（鼠标触发的mouse开头都是鼠标事件）

click单击事件

dblclick双击事件

mouseover鼠标移进（自己及里面的都能触发）

mousemove鼠标移动事件

mouseout鼠标移出

mouseenter鼠标移进（只会是自己可以触发）

mouseseleave鼠标鼠标移出

mousedown鼠标按下

mouseup鼠标弹起

键盘事件(键盘触发key开头的都是键盘事件)

keyup弹起

keydown按下

keypress字符键按下

// 除非是输入框，不然是不能调用键盘事件 都是window
    window.onkeydown = function(){
        console.log('键盘按下');
    }
    window.onkeyup = function(){
        console.log('键盘弹起');
    }
    window.onkeypress = function(){
        console.log('字符键按下');
    }

HTML事件（系统事件 被动触发的）

load加载

close关闭

change输入框的value值发送表示

select只有输入框才能触发（选择里面的内容）

focus获取焦点

blur失去焦点

reset重置

submit提交

scroll滚动条滚动

// load 窗口的加载 图片的加载等等
    window.onload = function(){
        console.log('窗口加载');
    }
    window.onunload = function(){
        console.log('窗口卸载');
    }
    window.onclose = function(){
        console.log('窗口关闭');
    }
    var input = document.querySelector('input')
    input.onchange = function(){
        console.log('value值发生变化了');
    }
    input.onselect = function(){//禁止复制粘贴
        console.log('当前内容被选择');
    }
    input.onfocus = function(){
        console.log('获取焦点');
    }
    input.onblur = function(){
        console.log('失去焦点');
    }
    // form表单的事件 onsubmit提交的时候触发 onreset 重置的时候触发
    document.querySelector('form').submit = function(){
        console.log('表单提交');
    }
    document.querySelector('form').onreset = function(){
        console.log('表单重置');
    }
    window.onscroll = function(){
        console.log('滚动条滚动');
    }

事件的组成

触发者.on+对应的事件名 = 处理的函数 对应的事件组成

触发者一般来说是对应的元素对象

事件名 就是上述分类的事件名

处理函数是由自己定义的函数（hanlder）（这个函数是事件驱动执行）

event（事件源）

触发者.on+对应的事件名 = 处理的函数 对应的事件组成

• 处理函数 是一个function作为一个function他具备一个argument（参数数组）
• 因为arguments[0]是获取的第一个参数 那么我在对应的处理函数里面写一个参数 这个参数就是对应的arguments[0]
• arguments[0]返回的对象是一个event类型的对象，这个对象同时又是全局的对象，所以他归属于window，可以写成window.event 或者省略对应的window（event）

// e是形参 相当于第一个形参 常见的写法 这个形参的名字叫 e 或者 event
    window.onkeydown = function(){
        console.log(e);//这个就是arguments[0] event类型对象
        // 他设计了一个event对象 他是一个全局的变量 window.event
        // ie为了兼容 我们会写出兼容写法
        e = e || event
        console.log(a.altKey);
        console.log(a.key);
    }

属性

坐标相关的属性

// 打印完 看到arguments具备一个参数 是一个对象（pointer）
        console.log(arguments);
        console.log(arguments[0]);
        console.log(arguments[0].x);//鼠标x坐标 （不包含不可视区域
        console.log(arguments[0].y);//鼠标y坐标页面上
        console.log(arguments[0].pageX);//得到鼠标在页面上的x坐标 （包含不可视区域
        console.log(arguments[0].pageY);// 得到鼠标在页面上的y坐标 （包含不可视区域）
        console.log(arguments[0].layerX);//默认是得到鼠标基于页面的x坐标
        console.log(arguments[0].layerY);//默认是得到鼠标基于页面的y坐标 当你添加定位以后他是基于定位元素的坐标
        console.log(arguments[0].clientX);//得到鼠标在可视区域内x的坐标（不包含不可视区域
        console.log(arguments[0].clientY);// 得到鼠标在可视区域内的y坐标 （不包含不可视区域）
        // 当前点击元素内的坐标
        console.log(arguments[0].offsetX);//得到鼠标在偏移元素内容的x坐标 （当前添加事件的元素里面的坐标 不包含border）
        console.log(arguments[0].offsetY);//得到鼠标在偏移元素内容的坐标 （当前添加事件的元素里面的坐标 不包含border
        // 屏幕坐标
        console.log(arguments[0].screenX);
        console.log(arguments[0].screenY);

按键相关的属性

鼠标相关的内容

事件触发的相关属性

键盘事件相关的内容（需要键盘来触发的事件）

// 按键的相关属性
        console.log(arguments[0].ctrlKey);
        console.log(arguments[0].altKey);
        console.log(arguments[0].shiftKey);
        // 鼠标的相关内容
        // button返回的值为number类型（0表示左键 1表示中间 2表示右键（但是不显示
        console.log(arguments[0].button);
        // 事件触发的相关属性
        console.log(arguments[0].type);//事件触发类型
        console.log(arguments[0].target);//目标对象 事件触发元素真实触发的元素
        console.log(arguments[0].currentTarget);//目标对象 表示事件触发的元素（返回当前添加事件的元素
        console.log(arguments[0].bubbles);//是否冒泡
// 键盘相关的内容（需要键盘来触发的事件
        // key属性 获取当前的按键
        // keyCode属性 获取大写的ASCII码
        // charCode属性 字符键press事件的ASCII码
    window.onkeypress = function(){
        console.log(arguments[0].key);
        console.log(arguments[0].keyCode);
        console.log(arguments[0].charCode);
    }
    //e是形参 相当于第一个形参
    window.onkeydown = function(e){
        console.log(e);//这个就是arguments[0]
        // 他设置一个event对象 他是一个全局变量 window.event 
        //ie为了兼容 我们会写成
        e = e || window.event //兼容写法
        console.log(e.key);
        console.log(e.keyCode);
        
    }
    function fn(a,b,c){
        console.log(arguments);
        console.log(arguments[0]);
        console.log(a);
    }
    fn(1,2,3)

事件流

概述:事件流指代的是事件的执行流程，多个盒子嵌套相同事件，这个时候你触发一个盒子的事件，并不会只执行一个盒子的事件的处理函数，而是全部执行。

事件流的两种模式

冒泡模式（浏览器采用的）

冒泡模式指代的是事件从里到外逐个执行

阻止事件冒泡

e.stopPropagation()函数 （*）（stop）

document.querySelector('a').onclick = function(e){
        e = e || event
        e.preventDefault()
        console.log('hello');
    }
    // 阻止表单的默认提交行为
    document.querySelector('form').onsubmit = function(e){
        e = e || event
        // e.preventDefault()
        e.preventDefault?e.preventDefault():e.returnValue = false//兼容写法
        console.log('submit');
    }
    // 对按钮无效阻止
    document.querySelector('input').onsubmit = function(e){
        e = e || event
        e.preventDefault()
        console.log('submit');
    }
    // 第三种阻止方案
    document.querySelector('a').onsubmit = function(e){
        e = e || event
        console.log('hello');
        return false//函数的结束 gc垃圾回收机制会准备回收
    }

 拖拽

思路

• 给拖拽的元素添加mousedown的事件 记录当前点击的位置
• 给对应的容器添加mousemove事件 记录每次移动的位置
• 给对应的容器添加mouseup事件 清除上述mousemove事件

代码实现：

// 获取div
    var box = document.getElementById('box')
    // 给document添加mousedown事件
    box.onmousedown = function(e){
        e = e || event
        //记录的是鼠标在div里面的位置
        // var x = e.offsetX
        // var y = e.offsetY
        // var x = e.pageX - div离页面的位置
        var x = e.pageX - box.offsetLeft
        var y = e.pageY - box.offsetTop
        document.onmousemove = function(e){
            // 记录每次的位置 在document里面的位置
            var currentX = e.pageX
            var currentY = e.pageY
            box.style.left = currentX - x + 'px'
            box.style.top = currentY - y + 'px'

        }
        document.onmouseup = function(){
            // 清除对应的mousemove事件
            document.onmousemove = null
        }
    }
    // 在mousedown里面记录按下的位置
    // 给document添加mousemove的事件

样式获取

style属性 只能获取标签内容style属性里面存在的一些样式

如果你需要获取对应的全局所以地方设置样式 我们就需要采取一些方法

getComputerStyle方法属于window的方法

var box = document.querySelector('div')
    console.log(box.style.width);
    console.log(box.style.height);
    var styleObj = window.getComputedStyle(box)
    console.log(styleObj.width);
    console.log(styleObj.height);
    console.log(styleObj.backgroundColor);
    console.log(styleObj.color);
    // IE的兼容
    // var element = box.currentStyle(box.currentStyle)
    window.getComputedStyle?window.getComputedStyle(box):box.currentStyle
    function getStyle(element,attr){
        var style = window.getComputedStyle?window.getComputedStyle(box):box.currentStyle
        return style[attr]
    }
    console.log(getStyle(box,'backgroundColor'));