事件的总结

事件构成三要素

1、触发的元素

2、事件函数（on+事件类型）

3、事件处理方法

事件书写方式

元素内部直接写

<a href = '' onclick = "alert('hello')"></a>

元素内部调用函数

<a href = '' onclick = 'fn()'></a>

使用对应的事件属性添加事件

var box = document.getElementById('box')
box.onclick = function(){
    
}
box.onclick = fn

事件类型

1、鼠标事件

点击事件 onclick（执行在按下和弹起之后）

双击事件 ondblclick

移入事件 onmouseover（子元素也会触发）

移出事件 onmouseout

移入事件 onmouseenter（子元素不会触发）

移出事件 onmouseleave

移动事件 onmousemove

按下 onmousedown

弹起 onmouseup

2、键盘事件

onkeydown 按下

onkeyup 弹起

onkeypress 按下后弹起前（字符按键 包含字母数组下划线特殊字符及回车空格）

3、html事件

onload 加载 window

onunload 卸载 window

onblur 失去焦点 input

onfoucs 获取焦点 input

onsubmit 提交事件 form表单

onreset 重置事件 form表单

onselect 文本内容选择事件 iput和textarea

onscoll 滚动栏滚动事件 window

onchange 内容修改事件 表单元素

事件源对象

event 其实是对应的触发事件函数里面的第一个参数

兼容写法

box.onclick = function(e){
    e = e || event
}

事件源对象的相关属性

button 按键按下的是那个0表示左键 1表示滚轮 2表示右键

type 事件类型

target 目标元素（触发事件的元素）currentTarget 实际触发事件的元素

x 获取鼠标的x坐标 y获取鼠标的y坐标（有兼容问题 ie浏览器）

screenX获取屏幕到鼠标的距离 screenY获取屏幕到鼠标的y距离

pageX 获取鼠标离页面最顶部的x距离（包含滚动栏） pageY 获取鼠标离页面最顶部的y距离（包含滚动栏）火狐浏览器不支持

clientX获取鼠标离页面的可视区域的x距离 clientY获取鼠标离页面的可视区域的y距离

offsetX获取鼠标在盒子里面的坐标 offsetY获取鼠标在盒子里面的y坐标

ctrlKey 是否按着ctrl键

shiftKey 是否按着shift键

altKey 是否按着alt键

code 获取按钮

keyCode 获取按钮值的ascii码（只会获取大写）

charCode获取字符的ascii码 区分大小写（只会运用在keypress里面）

事件this指向

如果是在对应的function里面，那么this指向function的拥有者（也就是触发事件的元素）

如果他在没有对象包的情况下他指向window（有对象包就属于对象的拥有着）

阻止事件的冒泡及默认行为

事件冒泡

e.stoppropagation() //兼容问题 不兼容ie遵从w3c规范
e.cancelBubble = true   //兼容ie 不遵从w3c规范（未来会被废弃）
e.stoppropagation?e.stoppropagation():e.cancelBubble = true

阻止默认行为

e.preventDefault()  //兼容问题
e.returnValue = false //兼容
return false //后续的代码不会执行，放在最后面
e.preventDefault?e.preventDefault():e.returnValue = false

offset家族（元素的属性 只读属性）

offsetParent 基于偏移的父元素（有定位（没有定位就找body）就近原则）

offsetLeft 左边的偏移量 offsetTop 上面的偏移量

offsetWidth 自身的宽度 offsetHeight自身的高度

事件监听器

添加addEventListener

element.addEventListener('事件名'，function（）{
                         
}，false)    //参数一 事件名 参数2 方法 参数3 是否捕捉  默认false为冒泡   

删除removeElentListener

element.removeElentListener('事件名'，function（）{
                            
 }) //如果参数2为一个function声明 那么将不能删除 建议抽取这个function

获取样式（元素样式）

window.getComputedStyle() //获取样式

window.getComputedStyle(元素，null)    //第一个参数为元素 第二个参数为null也可以省略
//兼容写法
var style = window,getComputedStyle?window.getComputedStyle():windo.cyrrentStyle

事件委托机制

主要是将事件委托给父元素，在父元素内使用target进行判断当前点击的是哪一个元素 在做相关操作

var box = document.getElementById('box')
box.onclick = function(e){
    //通过e.target找到你点击的目标元素来进行操作
    console.log(e.target.innerText);    //目标元素
}

拖拽的实现

主要运用的是onmousedown onmousemove onmouseup