事件

事件是什么？

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

 

事件的模式

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

 

事件的分类：

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

click 单击事件
dblclick 双击事件
mousemove 鼠标移动事件
mouseover 鼠标移进 （自己及自己里面的都能触发）
mouseout 鼠标移出
mouseenter 鼠标移进 （只会是自己可以触发）
mouseleave 鼠标移出
mousedown 鼠标按下
mouseup 鼠标弹起

oncontextmenu  鼠标右键

......

 document.onclick = function(){

            console.log('单击了');

        }

        document.ondblclick = function(){

            console.log('双击了');

        }

        var box = document.querySelector('div')

        box.onmousemove = function(){

            console.log('鼠标移动');

        }

        box.onmouseover = function(){ //对应的子元素也可以触发

            console.log('over移进');

        }

        box.onmouseout = function(){ //对应的子元素也可以触发

            console.log('out移出');

        }

        box.onmouseenter = function(){ //只有自己能触发

            console.log('enter移进');

        }

        box.onmouseleave = function(){ //只有自己能触发

            console.log('leave移出');

        }

        box.onmousedown = function(){

            console.log('按下');

        }

        box.onmouseup = function(){

            console.log('弹起');

        }

        box.onclick= function(){

            console.log('点击');

        }

        //就是右键点击 （不会触发点击事件）

        box.oncontextmenu = function(){

            console.log('右键点击');

        }

 

 

键盘事件 （键盘触发 key开头的都是键盘事件）

keyup 弹起
keydown 按下
keytpress 字符键按下

 

 

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

load 加载
close 关闭
change 输入框的value值发送表示
select 只有输入框才能触发 （选择里面的内容）
focus 获取焦点
blur 失去焦点
reset 重置
submit 提交
scorll 滚动条滚动
...

 

 

 

事件的组成

触发者.on+对应的事件名 = 处理的函数 对应的事件组成
触发者 一般来说是对应的元素对象
事件名 就是上述分类的事件名
处理函数 由自己定义的函数（handler）（这个函数是事件驱动执行）

 

 

event （事件源）

关于事件的组成  元素.on事件名 = 处理函数

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

 

 

属性

坐标相关的属性

x 得到鼠标的x坐标（不包含不可视区域）
y 得到鼠标的y坐标 （不包含不可视区域）
pageX 得到鼠标在页面上的x坐标 （包含不可视区域）
pageY 得到鼠标在页面上的y坐标 （包含不可视区域）
clientX 得到鼠标在可视区域内的x坐标 （不包含不可视区域）
clientY 得到鼠标在可视区域内的y坐标 （不包含不可视区域）
offsetX 得到鼠标在偏移元素内容的x坐标 （当前添加事件的元素里面的坐标 不包含border）
offsetY 得到鼠标在偏移元素内容的y坐标 （当前添加事件的元素里面的坐标 不包含border）
layerX 默认是得到鼠标基于页面的x坐标 当你添加定位以后他是基于定位元素的坐标
layerY 默认是得到鼠标基于页面的y坐标 当你添加定位以后他是基于定位元素的坐标
screenX 得到鼠标在屏幕的上的x坐标
screenY 得到鼠标在屏幕上的y坐标

 

 

 

按键的相关属性

altKey 是否长按alt键ctrlKey 是否长按ctrl键
shiftKey 是否长按shift键

 

鼠标相关的内容（只有鼠标触发的事件有）

button 返回的值为number类型（0 表示左键 1表示中间 2表示右键）

 

事件触发的相关属性

type 事件类型 返回对应的事件名
target 目标元素
返回真实触发的事件元素
currentTarget 目标元素 返回当前添加事件的元素
bubbles 事件是否冒泡

 

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

key 属性 （当前按下的键）
keycode 属性 （获取当前按下键大写的ascii码）
charCode 属性（字符键 press事件 ascii码）

 

事件流

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

 

事件流的俩种模式

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

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

阻止事件冒泡
e.stopPropagation() 函数 （*）（stop）
e.cancelBubble = true 属性设置（现在虽然都可以用 但是未来可能会废弃）

 

 

捕获模式

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

默认行为

就是一个元素会自带的行为称为默认行为 a标签的默认行为会跳转 form标签里面submit按钮默认会提
交（刷新页面）鼠标右键会出现一个菜单栏 等等一系列的问题
有些时候我们不需要这些行为的产生 那么我们就需要阻止默认行为

阻止默认行为的js实现

e.preventDefault() 函数 （*） （prevent）
e.returnValue = false ie的兼容
return false 直接结束对应的操作

 

 拖拽

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

代码实现

 

 

 

 事件委托

概述: 将对应的子元素的事件添加给父元素，用e.target来获取真实操作的元素 从而完成相关的操作
（不能用到事件委托的 mouseenter 和 mouseleave 以及 mousemove..）

 

 

 offset家族

offsetParent 偏移的父元素（一层一层的向上找 找到定位的元素就是对应的父元素 有定位的上层元素
就他的父元素 找不到的就是body）
offsetLeft 基于偏移的父元素的左偏移量
offsetTop 基于偏移的父元素的上偏移量
offsetHeight 获取偏移元素的高度（包含border以及padding）
offsetWidth 获取偏移元素的宽度（包含border以及padding）

 

拖拽（区间拖拽）

 

 

 

 

获取对应的盒子离最外层body的left值及top值

 

 

 

事件监听器

addEventListener （添加事件监听）任何元素都能调用（观察者模式 observer）

 

 

removeEventListener （移除事件监听）任何元素都能调用