每个事件都有事件源，事件类型，事件处理程序
事件源指触发事件的元素，事件类型值什么事件，事件处理程序指事件触发要执行的代码
每一个事件类型都有一个事件对象，事件对象是事件源触发产生的对象
事件对象其实指的是事件类型本身，事件对象要放在处理函数的形参中
javascript"> box.onclick = function (e) {console.log(e);//onclick下的所有属性方法console.log(e.target);//box//target是onclick的一个属性, 指向触发事件的事件源元素}鼠标事件
onmouseover鼠标刚要进入元素时触发
onmouseenter鼠标完全进入元素时触发
onmouseover和onmouseenter的区别
前者是进入边框也会触发，后者完全进入元素才会触发冒泡事件只会发生在onmouseover不会发生在onmouseenter，一般情况使用onmouseenter不使用over
onmousemove鼠标在元素上移动时触发
onmouseout鼠标刚要离开元素时触发
onmouseleave鼠标完全离开元素时触发
onmouseout如果有嵌套的子元素进入子元素也会触发，onmouseleave不会触发
onmousedown鼠标按下时触发 onmouseup鼠标弹起时触发
onclick鼠标单机时触发 ondblclick鼠标双击时触发
鼠标滚轮被滚动时触发
onmousewheel触发对象是浏览器窗口window/body/document
javascript"> window.onmousewheel=function(){e.wheelDeltaY是滚轮滚动的高度正值为向上滚动负值是向下滚动}onscroll鼠标在元素上滚动时触发，触发对象是所有元素
oncontextmenu鼠标右击触发的事件一般用于清除系统菜单
e.clientX e.clientY鼠标点击光标的坐标
表单事件
orchange内容发送改变时发生的事件最终结果发送改变才触发
onfocus获取焦点时发生的事件
onblur失去焦点时发生的事件
oninput输入事件，只要输入就会发生，实时触发
onsumbit表单提交事件
onsumbit绑定的对象是一个from表单
只针对于标准的from表单，点击提交按钮就会触发from表单的事件
onreset表单重置事件（清除表单数据）
javascript"> from.onsumbit = function (e) {e.preventDefault();//阻止一个事件的默认效果// from表单的提交事件默认刷新页面}键盘事件
onkeydown键盘按下时触发
onkeypress键盘按着不动时触发
onkeyup键盘按键弹起时触发
keyCode键盘编码值
每次按下按键都会经历一次三个事
this指向问题
构造函数中this指向当前实例化对象
普通函数中this指向window
对象中this指向当前方法所属的对象
事件中this指向当前事件的事件源
窗口事件
onresize监听当前窗口页面大小的变化
innerHeight当前页面高度
innerWidth当前页面宽度
onload 文档及其资源文件都加载完成时触发
onunload页面关闭时触发，一般用来清除换成和定时器
注册事件和移除事件
注册事件通过addEventListener方法注册事件处理程序
javascript"> box.addEventListener("事件类型", 事件处理函数);box.addEventListener("click", function () {console.log("注册单机事件");})移除事件
注册事件和移除事件一般配套使用
使用移除事件时注册事件的处理函数要单独创建再用形参调用
javascript"> function fn() {console.log("注册事件");}box1.addEventListener("click", fn)//参数这里调用不加括号removeEventListener移除事件
javascript"> box.onclick = function () {box1.removeEventListener("click", fn);box.onclick = full;// 给addEventListener()注册的事件移除时需要用移除事件// 如果是获取的元素可以给目标事件赋值为空}事件的传递过程是从外到内获取元素，事件绑定目标和冒泡阶段
并不是所有事件都能冒泡
事件捕获
addEventListener("事件类型","事件处理函数","boolean是否捕获");
true是捕获阶段，默认是false冒泡阶段
添加true后会先运行加true的事件再运行冒泡事件
默认顺序是冒泡事件从内到外
阻止冒泡
阻止事件传播e.stopPropagation();
事件委托
将原本绑定再子元素的事件绑定在父元素上
事件委托又叫事件代理，用来提升代码效率
事件获取元素索引
javascript"> var li=document.getElementsByTagName("li");for(var i=0;i<li.length;i++){// li[i]对象// 给dom对象添加自定义属性li[i].a=i;li[i].onclick=function(e){console.log(i);//4console.log(li[i]);//因为点击之前i已经是4，索引不能这样写console.log(this.a);}}mouseEvent鼠标属性
clientX相对于浏览器可视区的x坐标，浏览器左上方为坐标原点
clientY相对于浏览器可视区的x坐标，浏览器左上方为坐标原点
pageX,pageY
整个页面被卷去的body长度,相对于文档区域左上角
screenX,screenY
点击位置距离当前电脑屏幕的距离
offsetX,offsetY
相对于事件源的x,y坐标(光标相对于自身盒子内侧的坐标，不包含边框)
小盒子随鼠标移动
javascript"> document.onmousemove = function (e) {box.style.left = e.clientX + "px";box.style.top = e.clientY + "px";}元素的offset属性
offsetLeft,offsetTop获取到的是距离父元素左上角的位置//只读
offsetWidth,offsetHeight自身包括padding,边框,内容区的宽高度
offsetParent作为偏移参照点的父元素
client属性
clientLeft,clientTop获取距离父元素左上角的位置
clientWidth,clientHeight不包括边框滚动条，但包括内边距
scroll属性
scrollTop被卷进去的垂直距离
scrollWidth获取内容宽度不包含滚动条
scrollHeight获取内容高度不包含滚动条
window下属性
window.pageXOffset获取当前页面相对于窗口显示区左上角的X位置(页面滚动的距离)
window.pageYOffset获取当前页面相对于窗口显示区左上角的Y位置//只读
window.screenLeft获取浏览器据屏幕左上角的左边距
window.screenTop获取浏览器据屏幕左上角的上边距
window.screen.width记录了客户端显示屏的宽
window.screen.height记录了客户端显示屏的高
window.innerWidth记录了当前窗显示口页面的宽度
window.innerHeight记录了当前显示窗口页面的高度
如果有滚动条，内部包括滚动条宽高度，只读
