事件
概念：事件是用户在网页中的行为
语法：
标签名.on事件类型=函数
标签名分为：
获取到的标签
document
window
body
类型：
鼠标类：
鼠标单击：
标签名.onclick=function(){}
鼠标双击：
标签名.ondblclick=function(){}
鼠标移入：
标签名.onmouseover=function(){}
标签名.onmouseenter=function(){}
鼠标移出：
标签名.onmouseout=function(){}
标签名.onmousemove=function(){}
鼠标按下：
标签名.onmousedown=function(){}
鼠标弹起：
标签名.onmouseup=function(){}
鼠标滚轮：
标签名.onmousewheel=function(){}
鼠标右击：
标签名.oncontextmenu=function(){}
键盘类:
键盘按住：
document.keydown=function(){}
键盘按住：
document.keypress=function(){}
键盘弹起：
document.keyup=function(){}
表单类:
获取焦点：
inp.onfocus=function(){}
失去焦点:
inp.onblur=function(){}
改变:
inp.onchange=function(){}
表单提交:
inp.onsubmit=function(){}
文本框内容变化:input
window类:
scroll滚动事件：
window.onscroll=function(){}
load浏览器加载事件：
window.onload=function(){}
resize浏览器窗口大小：
window.onresize=function(){}
函数：
匿名函数
函数名称
事件流
概念：事件从开始触发到执行结束的整个过程
分为3个阶段执行：
捕获阶段：由外向内找目标元素的过程
目标阶段：找到目标元素执行他的执行
冒泡阶段：由内向外离开目标元素的过程 -- 祖宗标签的同类型事件会在冒泡阶段执行
事件侦听器：
概念：另外一种绑定事件的方式
语法：
标签名.addEventListener(事件类型,函数,这个事件是否在后代标签的捕获阶段执行)
解绑：
标签名.on事件类型 绑定的事件 -- 标签名.on事件类型=null
例：
div.onclick=function(){
box.mouseover=null
}
事件侦听器绑定的事件
语法：
标签名.removeEventListener(事件类型, 对应的函数)
解绑的类型和绑定的类型要保持一致
解绑的函数和绑定的函数必须是同一个
事件对象
概念：事件中用于记录当前事件所有详细信息的对象
如何获取：
事件函数的参数1
事件函数中用window.event
作用：
获取鼠标的位置：
相对于浏览器可视窗口的位置：
例：
X轴：var x=e.clientX -- e.clientX
Y轴：var Y=e.clientY -- clientY
相对于当前标签的位置：
例：
X轴：var x=e.offsetX -- e.offsetX
Y轴：var Y=e.offsetY -- e.offsetY
相对于当前文档的位置：
例：
X轴：var x=e.pageX -- e.pageX
Y轴：var Y=e.pageY -- e.pageY
获取键盘按键码：
e.keyCode:
字母是大写的阿斯克码
数字是数字的阿斯克吗
回车 -- 13
空格 -- 32
上下左右键 -- 38-40-37-39
组合键：
e.shiftKey
e.ctrlKey
e.altKey
获取事件类型：
console.log(e.type)
获取鼠标按键码：
console.log(e.button)
阻止事件冒泡：
e.stopPropagation()
例：
var small = document.querySelector('.small')
var middle = document.querySelector('.middle')
var big = document.querySelector('.big')
small.onclick = function(e) {
// 阻止事件冒泡
e.stopPropagation()
e.stopPropagation()
console.log('小');
}
middle.onclick = function() {
console.log('中');
}
big.onclick = function() {
console.log('大');
}
阻止默认行为：
e.preventDefault()
在事件函数末尾添加：return false
例：
//阻止右击事件
document.oncontextmenu = function(e) {
e.preventDefault()
console.log('右击了文档');
//阻止默认行为，还可在事件函数的末尾 - return false
return false
}
获取精准的目标元素：
语法：
e.target
例：
var div.onclick=function(e){
var tag=e.target
}
实现事件委托：
将子标签事件给父标签绑定，在事件函数中，通过判断精准的目标元素是否是子标签
原理：
利用事件冒泡
好处：
提高绑定小效率
动态添加的子表也可以具备事件
例如：
// 事件委托：请求别人代替自己处理事件
var lis = document.querySelectorAll('li')
//普通添加子标签 子标签没有事件
for (var a = 0; a < lis.length; a++) {
lis[a].onclick = function() {
console.log(this.innerText);
}
}
var ul = document.querySelector('ul')
ul.onclick = function(e) {
console.log(e.target.innerText);
}
// 事件委托可以让动态添加的子标签，也能有事件
document.querySelector('button').onclick = function() {
var li = document.createElement('li')
li.innerText = '44444444444'
ul.appendChild(li)
}
