目录
鼠标事件
1.鼠标点击事件
2.鼠标移动
3.鼠标经过（很重要）
4.鼠标来源
5.鼠标定位
6.鼠标按键
7.鼠标滚轮事件
键盘事件（监听键盘）一般都是在window上面操作
4.获取当前坐标的属性
输入框自带的事件（称为表单事件）
1.input事件 用户在输入框中输入就会触发（是监听元素的） 常用
2.change事件
3.让输入框自动有焦点
4.焦点事件 focus
5.失去焦点blur
其它事件
1.onload 加载完毕时执行
2.scroll 元素的滚动条滚动
鼠标事件
注意点：onclick和click的区别 ，on 就是绑定事件的意思，onclick就是绑定点击事件，click才是事件的名字
为什么addEventListener('click',fn) 中的click不是onclick，因为addEventListener是添加，不需要绑定。
看到onclick这种加了on的 就是绑定事件 ，看到click这种不加on的就是监听事件addEventListener('click',fn)。
注意：下面的事件，如果想写在属性绑定或者行内式就加on,如果想写在addEventListener里面不加on
1.鼠标点击事件
鼠标点击事件包括 ：click（单击）(左键)，dblclick（双击）、mousedown（按下）和mouseup（松开）。其中 click 事件类型比较常用，而 mousedown 和 mouseup 事件类型多用在鼠标拖放、拉伸操作中。当这些事件处理函数的返回值为 false 时，会禁止绑定对象的默认行为。
contextmenu(右键) ，得通过event.preventDefault();阻止默认事件，通过return false;没有效果
<body><div class="box">666</div><script>let box = document.querySelector('.box');box.addEventListener('contextmenu',function(){event.preventDefault(); //这里写阻止默认事件console.log(6666);// return false;});</script></body>
2.鼠标移动
mousemove 事件类型是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动一个像素），就会触发 mousemove 事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢以及浏览器跟踪更新的速度
例子：（此例子很重要）下面示例演示了如何综合应用各种鼠标事件实现页面元素拖放操作的设计过程。实现拖放操作设计需要解决以下几个问题。
定义拖放元素为绝对定位以及设计事件的响应过程，这个比较容易实现。清楚几个坐标概念：按下鼠标时的指针坐标，移动中当前鼠标指针坐标，松开鼠标时的指针坐标，拖放元素的原始坐标，拖动中的元素坐标。算法设计：按下鼠标时，获取被拖放元素和鼠标指针的位置，在移动中实时计算鼠标偏移的距离，并利用该偏移距离加上被拖放元素的原坐标位置，获得拖放元素的实时坐标。
如上图所示，其中变量 ox 和 oy 分别记录按下鼠标时被拖放元素的纵横坐标值，它们可以通过事件对象的 offsetLeft 和 offsetTop 属性获取。变量 mx 和 my 分别表示按下鼠标时，鼠标指针的坐标位置。而event.mx 和 event.my 是事件对象的自定义属性，用它们来存储当鼠标移动时鼠标指针的实时位置。
当获取了上面 3 对坐标值之后，就可以动态计算拖动中元素的实时坐标位置，即 x 轴值为 ox+event.mx-mx，y 轴为 oy+event.my-my。当释放鼠标按钮时，就可以释放事件类型，并记下松开鼠标指针时拖动元素的坐标值，以及鼠标指针的位置，留待下一次拖放操作时调用。
代码：这是借鉴的别人的代码，这部分知识掌握还会回来写的。
<div id="box" ></div><script>// 初始化拖放对象var box = document.getElementById("box");// 获取页面中被拖放元素的引用指针box.style.position = "absolute"; // 绝对定位box.style.width = "200px"; // 定义宽度box.style.height = "200px"; // 定义高度box.style.backgroundColor = "red"; // 定义背景色// 初始化变量，标准化事件对象var mx, my, ox, oy; // 定义备用变量function e(event){ // 定义事件对象标准化函数if( ! event){ // 兼容IE浏览器event = window.event;event.target = event.srcElement;event.layerX = event.offsetX;event.layerY = event.offsetY;}event.mx = event.pageX || event.clientX + document.body.scrollLeft;// 计算鼠标指针的x轴距离event.my = event.pageY || event.clientY + document.body.scrollTop;// 计算鼠标指针的y轴距离return event; // 返回标准化的事件对象}// 定义鼠标事件处理函数document.onmousedown = function(event){ // 按下鼠标时，初始化处理event = e(event); // 获取标准事件对象o = event.target; // 获取当前拖放的元素ox = parseInt(o.offsetLeft); // 拖放元素的x轴坐标oy = parseInt(o.offsetTop); // 拖放元素的y轴坐标mx = event.mx; // 按下鼠标指针的x轴坐标my = event.my; // 按下鼠标指针的y轴坐标document.onmousemove = move; // 注册鼠标移动事件处理函数document.onmouseup = stop; // 注册松开鼠标事件处理函数}function move(event){ // 鼠标移动处理函数event = e(event);o.style.left = ox + event.mx - mx + "px"; // 定义拖动元素的x轴距离o.style.top = oy + event.my - my + "px"; // 定义拖动元素的y轴距离}function stop(event){ // 松开鼠标处理函数event = e(event);ox = parseInt(o.offsetLeft); // 记录拖放元素的x轴坐标oy = parseInt(o.offsetTop); // 记录拖放元素的y轴坐标mx = event.mx ; // 记录鼠标指针的x轴坐标my = event.my ; // 记录鼠标指针的y轴坐标o = document.onmousemove = document.onmouseup = null;// 释放所有操作对象}</script>
3.鼠标经过（很重要）
鼠标经过包括移过和移出两种事件类型。
这下面4个绑定的都是父元素：
01.当移动鼠标指针到某个元素上时，将触发mouseover 事件；如果从父元素中移到子元素中时，也会触发父元素的 mouseover 事件类型。从子元素移到父元素中也会触发。从子元素或者父元素中移到外面则不会触发，从外面移到子元素或者父元素会触发。（范围广点）
02.当移动鼠标指针到某个元素上时，将触发mouseenter事件；如果从父元素中移到子元素不会触发，从子元素中移到父元素也不会触发。从子元素或者父元素中移到外面则不会触发，从外面移到子元素或者父元素会触发。
mouseenter事件的应用：结合伪类元素hover 下拉框，鼠标一移入父元素，就会出现一个下拉框，是父元素的子元素。从父元素中进入子元素不会触发，从子元素进入父元素也不会触发，从父元素进入外面，下拉框消失。
03.当把鼠标指针移出某个元素时，将触发 mouseout 事件。（从子元素中移出到父元素中就会触发mouseout事件，从父元素中移除到子元素也会触发，鼠标从子元素或者父元素移除到外面，就会触发该元素的mouseout事件）（范围广点）
04.当把鼠标指针移除出某个元素时，将触发mouseleave 事件。（从父元素中移出到子元素中，不会触发，从子元素中移除到父元素中也不会触发，只有移除到父元素之外才会触发）（这里子元素也是算父元素中的一部分）
注意点：mouseenter 和 mouseleave 不支持冒泡
上面4个用下面代码验证就好：
<body> <style>.box{width: 400px;height: 300px;background-color: brown;cursor: pointer;}.son{width: 200px;height: 400px;background-color: palegreen;cursor: pointer;margin: 20px;}</style><div class="box"><div class="son"></div></div><script>//被选中是父元素var box = document.querySelector('.box');box.addEventListener('mouseleave',()=>{console.log('鼠标从被选元素中出去');})</script></body>
eg：在下面示例中，分别为 3 个嵌套的 div 元素定义了 mouseover 和 mouseout 事件处理函数，这样当从外层的父元素中移动到内部的子元素中时，将会触发父元素的 mouseover 事件类型，但是不会触发 mouseout 事件类型。
<div><div><div>盒子</div></div></div><script>var div = document.getElementsByTagName("div");// 获取3个嵌套的div元素for(var i=0;i<div.length;i++){ // 遍历嵌套的div元素div[i].onmouseover = function(e){ // 注册移过事件处理函数this.style.border = "solid blue";}div[i].onmouseout = function(){ // 注册移出事件处理函数this.style.border = "solid red";}}</script>
4.鼠标来源
当一个事件发生后，可以使用事件对象的 target 属性获取发生事件的节点元素。如果在 IE 事件模型中实现相同的目标，可以使用 srcElement 属性。
5.鼠标定位
当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。
eg1：
下面介绍如何配合使用多种鼠标坐标属性，以实现兼容不同浏览器的鼠标定位设计方案。
首先，来看看 screenX 和 screenY 属性。这两个属性获得了所有浏览器的支持，应该说是最优选用属性，但是它们的坐标系时计算机屏幕，也就是说，以计算机屏幕左上角为定位原点。这对于以浏览器窗口为活动空间的网页来说没有任何价值。因为不同的屏幕分辨率，不同的浏览器窗口大小和位置，都使得在网页中定位鼠标成为一件很困难的事情。
其次，如果以 document 对象为坐标系，则可以考虑选用 pageX 和 pageY 属性实现在浏览器窗口中进行定位。这对于设计鼠标跟随来说是一个好主意，因为跟随元素一般都以绝对定位的方式在浏览器窗口中移动，在 mousemove 事件处理函数中把 pageX 和 pageY 属性值传递给跟绝对定位元素的 top 和 left样式属性即可。
IE 事件模型不支持上面的属性，为此还需寻求兼容 IE 的方法。而看 clientX 和 clientY 属性是以 window 对象为坐标系，且 IE 事件模型支持它们，可以选用它们。不过考虑 window 等对象可能出现的滚动条偏移量，所以还应加上相对于 window 对象的页面滚动的偏移量。
var posX = 0, posY = 0;var event = event || window.event;if (event.pageX || event.pageY) {posX = event.pageX;posY = event.pageY;} else if (event.clientX || event.clientY) {posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;}
在上面代码中，先检测 pageX 和 pageY 属性是否存在，如果存在则获取它们的值；如果不存在，则检测并获取 clientX 和 clientY 属性值，然后加上 document.documentElement 和 document.body 对象的 scrollLeft 和 scrollTop 属性值，这样在不同浏览器中就获得了相同的坐标值。
eg2：
封装鼠标定位代码。设计思路：能够根据传递的具体对象，以及相对鼠标指针的偏移量，命令该对象能够跟随水保移动。
先定义一个封装函数，设计函数传入参数为对象引用指针、相对鼠标指针的偏移距离，以及事件对象。然后封装函数能够根据事件对象获取鼠标的坐标值，并设置该对象为绝对定位，绝对定位的值为鼠标指针当前的坐标值。
var pos = function (o, x, y, event) { //鼠标定位赋值函数var posX = 0, posY = 0; //临时变量值var e = event || window.event; //标准化事件对象if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值posX = e.pageX;posY = e.pageY;} else if (e.clientX || e.clientY) {posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;}o.style.position = "absolute"; //定义当前对象为绝对定位o.style.top = (posY + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标}
下面测试封装代码。为 document 对象注册鼠标移动事件处理函数，并传入鼠标定位封装函数，传入的对象为 <div> 元素，设置其位置向鼠标指针右下方偏移（10,20）的距离。考虑到 DOM 事件模型通过参数形式传递事件对象，所以不要忘记在调用函数中还要传递事件对象。
<div id="div1">鼠标追随</div><script>var div1 = document.getElementById("div1");document.onmousemove = function (event) {pos (div1, 10, 20, event);}</script>
eg3：
获取鼠标指针在元素内的坐标。使用 offsetX 和 offsetY 属性可以实现这样的目标，但是 Mozilla 浏览器不支持。可以选用 layerX 和 layerY 属性来兼容 Mozilla 浏览器。
var event = event || window.event;if (event.offsetX || event.offsetY) { //适用非Mozilla浏览器x = event.offsetX;y = event.offsetY;} else if (event.layerX || event.layerY) { //兼容Mozilla浏览器x = event.layerX;y = event.layerY;}
但是，layerX 和 layerY 属性是以绝对定位的父元素为参照物，而不是元素自身。如果没有绝对定位的父元素，则会以 document 对象为参照物。为此，可以通过脚本动态添加或者手动添加的方式，设计在元素的外层包围一个绝对定位的父元素，这样可以解决浏览器兼容问题。考虑到元素之间的距离所造成的误差，可以适当减去 1 个或几个像素的偏移量。
完整设计代码如下：
<input type="text" id="text" /><span style="position:absolute;"><div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div></span><script>var t = document.getElementById("text");var div1 = document.getElementById("div1");div1.onmousemove = function (event) {var event = event || window.event; //标准化事件对象if (event.offsetX || event.offsetY) {t.value = event.offsetX + "" + event.offsetY;} else if (event.layerX || event.layerY) {t.value = (event.layerX-1) + "" + (event.layerY-1);}}</script>
这种做法能够解决在元素内部定位鼠标指针的问题。但是，由于在元素外面包裹了一个绝对定位的元素，会破坏整个页面的结构布局。在确保这种人为方式不会导致结构布局混乱的前提下，可以考虑选用这种方法。
6.鼠标按键
通过事件对象的 button 属性可以获取当前鼠标按下的键，该属性可用于 click、mousedown、mouseup 事件类型。不过不同模型的约定不同，具体说明如下表所示。
IE 事件模型支持位掩码技术，它能够侦测到同时按下的多个键。例如，同时按下左右键，则 button 属性值为 1+2=3；同时按下中键和右键，则 button 属性值为 2+4=6；同时按下左键和中键，则 button 属性值为 1+4=5；同时按下 3 个键，则 button 属性值为 1+2+4=7。
但是 DOM 模型不支持这种掩码技术，如果同时按下多个键，就不能够准确侦测。例如，按下右键（2）与同时按下左键和右键（0+2=2）的值是相同的。因此，对于 DOM 模型来说，这种 button 属性约定值存在很大的缺陷。不过，在实际开发中很少需要同时检测多个鼠标按钮问题，一般仅需要探测鼠标左键或右键单击行为。
eg：下面代码能够监测右键单击操作，并阻止发生默认行为。
document.onclick = function (e) {var e = e || window.event; //标准化事件对象if (e.button == 2) {e.preventDefault();return false;}}
当鼠标单击事件发生时，会触发很多事件：mousedown、mouseup、click、dblclick。这些事件响应的顺序如下：
mousedown → mouseup → click → mousedown → mouseup → click → dblclick
当鼠标在对象间移动时，首先触发的事件是 mouseout，即在鼠标移出某个对象时发生。接着，在这两个对象上都会触发 mousemove 事件。最后，在鼠标进入对象上触发 mouseover 事件。
7.鼠标滚轮事件
1.onwheel()鼠标指针在被选元素内部，鼠标滚轮滚动时才会触发
mousewheel 也是鼠标滚轮事件
被选元素的子元素也算是被选元素内部。
<body> <style>.box{width: 400px;height: 300px;background-color: brown;cursor: pointer;}.son{width: 200px;height: 400px;background-color: palegreen;cursor: pointer;margin: 20px;}</style><div class="box"><div class="son"></div></div><script>//被选中是父元素var box = document.querySelector('.box');box.onwheel = function(){console.log('鼠标指针在被选元素内部，鼠标滚轮滚动时才会触发');}</script></body>
注意：并不是 滚动条的滚动事件，而是鼠标滚轮的滚动事件。
应用：调节音量
键盘事件（监听键盘）一般都是在window上面操作
1.keydown 输入框的键盘按下 就会触发 （一般用这个就够了）
键盘按一个字母，就会监听按下的字母是什么（删除键也算是按下键盘也会触发）。如果按住不放就会一直触发。
应用：一般判定用户按了什么键
2.keyup 输入框的键盘松开就会触发。
3.keypress 输入框的键盘按下就会触发
键盘事件触发时，产生的事件对象中：key属性和keyCode属性 重要
key是哪个键，返回的是按下的键的键名(键码)
keyCode返回keydown和keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符(ASCII码值)；(firefox2不支持 event.keycode，可以用 event.which替代 )
<body><script>window.onkeydown = function(){console.log("键盘按下事件");console.log(event.keyCode);console.log(event.key);}window.onkeyup = function(){console.log("键盘松开事件");}</script></body>
分析:给window添加键盘事件，当鼠标在窗口内时，按下键盘上的键，会触发键盘事件。
4.获取当前坐标的属性
clientX clientY || x y :获取的是鼠标点击的位置距离窗口的左边和上边的距离
输入框自带的事件（称为表单事件）
1.input事件 用户在输入框中输入就会触发（是监听元素的）常用
用户输入内容，或者粘贴内容，或者拖拽内容到输入框，都会触发input事件
与 keydown的区别，input输入框的value值一直在变。keydown事件是监听键盘的，input事件是监听元素的，如果是语音输入那种，keydown就没效果。input事件就会有用。所以input用得更多一点。
一般输入框input元素绑定input事件，其它元素可以绑定keydown事件。
<body> <input type="text" id="box2"><script>//被选中是父元素var box2 = document.querySelector('#box2');box2.addEventListener('input',function(){console.log('输入框的键盘按下');});</script></body
2.change事件
输入框失焦并且value改变会触发change事件
鼠标指针在输入之前点击输入框，焦点在输入框里面，输入内容后，鼠标指针点击其它地方，焦点就不在输入框里面了，且输入内容value值也改变，就会触发change事件。
失焦和value值改变两个条件必须同时满足才能触发change事件。
<body> <input type="text" id="box2"><script>var box2 = document.querySelector('#box2');box2.addEventListener('change',function(){console.log('输入框失焦并且value改变');});</script></body>
应用：用户的输入验证，不是用户输入一位就验证一位然后提醒他输入的正确与否，这样烦人，而是等用户输完了，输入框失焦value值改变完再验证，所以change事件就很好用。
3.让输入框自动有焦点
01.标签的写法
<input type="text" id="box1" autofocus>
02.js写法
<body> <input type="text" id="box2"><script>var box2 = document.querySelector('#box2');box2.focus();</script></body>
分析：这样写目的是，一刷新页面，就会有输入框的光标自动闪烁。也就是焦点在输入框。
但一般不能每个输入框都设置光标闪烁，因为输入框都是写完一个再写一个。
4.焦点事件 focus
输入框获取焦点时触发
<body><input type="text" id="box2"><script>var box2 = document.querySelector('#box2');box2.addEventListener('focus', function () {console.log('输入框获取焦点时触发');});</script></body>
分析：输入框一获取焦点，立马就提示用户输入什么。。
5.失去焦点blur
输入框失焦时触发
<body><input type="text" id="box2"><script>var box2 = document.querySelector('#box2');box2.addEventListener('blur', function () {console.log('输入框失焦时触发');});</script></body>
拖拽事件
这三个事件是一起用的。
dragstart开始拖动，该事件绑定在拖动的节点之上。
dragover拖动到目标区域之上，该事件绑定在目标区域之上，事件需要清除浏览器默认事件，不然无法触发drop事件
drop拖动后松开，该事件绑定在目标区域上。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 200px;height: 200px;background-color: skyblue;/* 设置一共绝对定位：使得其脱离文档流，才能在整个窗口随便拖动 */position: absolute;top: 50px;left: 50px;}</style></head><body><!-- 没有内容就不会拖拽成功 --><div class="box">盒子</div><script>let box = document.querySelector('.box');let clickX,clickY;box.addEventListener('dragstart',()=>{console.log(11111);//点击要拖动的元素，获取鼠标点击的位置相对于元素的坐标clickX = event.offsetX;clickY = event.offsetY;});// 在window窗口中拖动 window.addEventListener('dragover',()=>{console.log(22222);//并且要阻止默认事件event.preventDefault();});//最终拖到的位置window.addEventListener('drag',()=>{//计算最终的偏移量 定位到哪里(left,top修改的是定位)box.style.left = `${event.pageX-clickX}px`; //event.pageX-clickX只能得到一个数值，要加上单位box.style.top = `${event.pageY-clickY}px`;});</script></body></html>
其它事件
1.onload 加载完毕时执行
一般加载要时间的就有onload属性，比如图片加载要时间，window加载要时间
浏览器加载完毕：5大BOM功能加载完毕，才会执行load事件
<body><script>window.onload = function(){console.log('浏览器加载完毕:5大BOM功能加载完毕');console.log(document.querySelector('#box3'),2222);}</script><div id="box3">666</div></body>
结果：
<body><script>window.onload = function(){console.log('浏览器加载完毕:5大BOM功能加载完毕');}console.log(document.querySelector('#box3'),2222);</script><div id="box3">666</div></body>
分析：两次console.log(document.querySelector('#box3'),2222);结果打印出来都不一样呢？这就要设计到浏览器的渲染过程了。
图片创建的两种方式 img.onload 图片加载完成触发
01.
let img1 = document.createElement('img');img1.src = '/it/u=1026317337,1339775897&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711';img1.onload = function () {console.log("img1加载完成");}
02.
let img2 = new Image();img2.src = '/it/u=2045019318,65348288&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500';img2.onload = function () {console.log("img2加载完成");}
2.scroll 元素的滚动条滚动
<body> <style>.box{width: 400px;height: 300px;background-color: brown;cursor: pointer;/* 子元素超出部分 设置为滚动条*/overflow-y: scroll;}.son{width: 200px;height: 700px;background-color: palegreen;cursor: pointer;margin: 20px;}</style><div class="box"><div class="son"></div></div><script>//被选中是父元素var box = document.querySelector('.box');box.addEventListener('scroll',function(){console.log('元素自己的滚动条滚动了：单位时间内滚动条的位置发生变化');})</script></body>
分析：子元素高度700px，父元素高度300px，父元素设置了超出父元素的部分设置为滚动条形式。一移动滚动条，就会执行box.addEventListener('scroll',function(){console.log('元素自己的滚动条滚动了：单位时间内滚动条的位置发生变化');})。
应用：scroll应用很多，常常给body标签绑一个，判定它的滚动条移动到某个位置后，进行预加载，加载后面的内容，接着显示出来。
eg：
window.addEventListener('scroll',()=>{console.log(document.body.scrolltop||document.documentElement.scrollTop);})
获取的是窗口的滚动条的滚动距离。
3.resize监听窗口
eg：
window.onresize = function () {console.log("监听窗口大小变化");}
分析：监听窗口大小的改变，改变就触发该事件。
