事件

事件概述:

用户在浏览器上触发一个操作 浏览器上会执行相关的函数进行处理 这个被称为事件. 2. 实例:用户点击注册按钮 浏览器会完成注册的操作

事件的俩种模式

内联模式

脚本模式 * 常用的

事件划分

事件执行者 元素

事件那个 on开头+对应的名字 所有的on都是属于事件

事件处理函数 function

事件的分类

鼠标事件(mouse)

点击的事件

onclick 单击

ondblclick 双击事件

onmousedown 鼠标按下事件

onmouseup 鼠标抬起

onmouseleave 鼠标离开

onmouseenter 鼠标进入

移出

onmouseleave 鼠标离开

onmouseover 鼠标进入

onmousewheel 鼠标滚轮事件

onmouseout 鼠标离开触发 (子元素也会触发)

移动

onmousemove 鼠标移动事件

移动事件触发的频率高,可以采用节流或者防抖来解决

1.下载lodash.js 采用外部引用方式

2.使用 .debounce(函数,时间)或者.throttle(函数,时间)

3.debounce 防抖 在固定事件内连续的触发,就会重新计时

4.throttle 节流 固定时长触发一次

键盘事件 (key)

keyup 弹起 按下 会少数 慢一个节拍

keydown 按下

keypress (针对于字符键(非功能键不会触发))

HTML事件

load 加载事件

unload 卸载

select 选择

change 修改

blur 失去焦点

focus 获取焦点

input 输入内容

scroll 滚动

submit 提交

reset 重置

所有的函数都具备一个参数 arguments (所有传递参数 他是数组)

处理函数也同样是函数 同样存在这个aarguments

通过我们的比对我们发现这个arguments里面只有一个参数 这个参数是一个event对象 (事件源对象)

由于我们的arguments[0]是或者对应的arguments数组里面的第一个参数(第一个形参 所以我们可以在对应的处理函数中直接声明一个形参来接收我们arguments里面的数据)

event 事件源对象 （window里面的）

event对象里面的属性

window.onkeydown = function(e){
//兼容 ie
e = e || window.event
//key 获取对应的按下的键
console.log(e.key);//兼容问题
//keyCode 获取对应按下键的ascii码
console.log(e.keyCode); //不管是大写还是小写获取的都是大写的ascii码
}
//只支持字符
window.onkeypress = function(e){
console.log(e.keyCode);
//将ascii转为对应的字符串
console.log(String.fromCharCode(e.keyCode));
//只在onkeypress 里面才有用 也返回是ascii码
console.log(e.charCode);
}

offsetX 鼠标离当前元素的X距离

offsetY 鼠标离当前元素的Y距离

clientX 鼠标离网页最左的距离 （不包含不可见部分）

clientY 鼠标离网页最顶部的距离 （不包含不可见部分）

pageX 鼠标离网页最左的距离 （包含不可见部分）

pageY 鼠标离网页最顶部的距离 （包含不可见部分）

screenX 鼠标离屏幕最左部的距离

screenY 鼠标离屏幕最顶部的距离

按键相关属性

e.ctrlKey 是否按下Ctrl 大写k

e.altKey 是否按下alt

e.shiftKey 是否按下shift

button （只针对于点击事件）

左键是0 中间为1 右键为2

type 事件触发类型

target 当前触发事件的对象

currentTarget 当前加事件的对象

键盘的输入的相关属性

key 获取对应的按下的键

keyCode 获取按下的键的ascii码

charCode 获取keypress事件中按键的ascii码

事件的两个行为

事件冒泡

从内到外冒泡, 比如说:里面有一个按钮添加了点击事件,外面有个盒子也添加了点击事件,在你触发对应的按钮的点击的时候 同时他会自动调用对应盒子的点击事件 而这个机制就叫做事件冒泡 总结:子元素点击后会触发父元素的点击事件

事件捕获

直接进行捕获处理

阻止事件冒泡

e.stoppropagation() * e.cancelBubble = true (兼容ie的写法)

1. e.stopProPagation() 停止冒泡 stop停止的意思 ProPagation传播的意思 

2. e.cancelBubble=true cancel取消的意思 Bubble 泡泡

3. 兼容写法  : e.stopPropagation?e.stopPropagation():e.cancelBubble = true  

   offset家族

   offset家族是获取对应的偏移的位置 他有奶便是娘 （他的父元素谁加了定位他就基于谁 否则基于body）

   offsetParent 偏移的父元素（选择离他最近加了定位的父元素）

   offsetLeft 左偏移 offsetTop 上偏移

   offsetWidth 偏移元素的宽度 offsetHeight 偏移元素的高度

   获取样式

   1.window.getComputedStyle() * 这个是获取css的样式 (重点) 返回的是一个样式对象 里面包含所有的样式 是一个css样式对象

4. 事件监听器

   1.采用了观察者模式（observer）

   2.同一个事件可以有多个处理函数

   3.在添加事件的时候对应的处理函数不能是匿名函数（不然是不能被移除的）

   添加事件监听 addEventListener() add添加 Event事件对象

   addEventListener(监听事件名,处理函数,冒泡false 还是捕获 true)

   移除事件监听 removeEventListener

   removeEventListener(事件名,处理函数)