JS-鼠标-键盘-文档-表单事件
1 回顾
1.1 节点创建、添加、删除、替换、克隆
创建元素：document.createElement('标签名')添加子节点：父元素.appendChild(节点)父元素.insertBefore(新节点，旧节点)删除子节点：父元素.removeChild()替换子节点元素.replaceChild(新节点， 旧节点)克隆节点：元素.cloneNode(true)
1.2 HTML DOM
表单:form 元素： submit() reset()输入框元素： foucus() blur() select()select 元素： length selectedIndex value foucus() blur() add() remove()表格：table 元素： rows cells insertRow() deleteRow()tr 元素： cells rowIndexinsertCell() deleteCell()单元格元素： cellIndex
1.3 document 对象和 documentFragment 对象
document:all、documentElement、body、head、title、cookie、lastModifiedwrite()documentFragment:document.createDocumentFragment()
1.4 事件
1. 事件监听① 把事件作为 html 标签的属性② 把事件作为元素对象的方法③ 使用 addEventListener()2. 解除事件的监听① 前两种方式监听的事件： 在监听一次事件，用 null 代替回调② addEventListener 监听的事件： removeEventListener()3. 事件流：捕获阶段、目标阶段、冒泡阶段
2 事件回调函数中 this 的指向
①函数中 this 指向的规则：this 指向调用该函数的对象。
② 事件回调函数中的 this 指向监听了该事件的元素对象， 事件的回调函数由监听了事件的元素调用。
案例:选项卡
// 获取元素var btns = document.querySelectorAll('.btn li');var contents = document.querySelectorAll('.content li')// 遍历btns，给每个btns监听事件for (var i = 0;i<btns.length;i++) {// 给每个btns元素设置一盒属性btns[i].index = i// 给每个btns监听事件btns[i].onclick = function() {// 其他所有的btn和content去掉activefor (var i=0;i<btns.length;i++) {btns[i].classList.remove('active');contents[i].classList.remove('active')}// 点击当前的btn添加类名activethis.classList.add('active');// 当前对应的btn添加类名activecontents[this.index].classList.add('active')}}
3 常用事件总结
3.1 鼠标事件
click单击dblclick双击contextmenu右击mouseover鼠标悬停在元素上， 建议用 mouseenter 代替mouseout鼠标离开元素，建议用 mouseleave 代替mouseenter鼠标悬停在元素上mouseleave鼠标离开元素mousedown鼠标按键按下mouseup 鼠标按键抬起mousemove鼠标移动/* 设置文字不能被选中 */user-select: none;
// 监听鼠标按键按下（用this改背景色）box.onmousedown = function() {this.style.backgroundColor = 'cyan'}// 监听鼠标按键抬起box.onmouseup = function() {this.style.backgroundColor = 'red'}// 监听鼠标在元素上移动 (在视口上body有8像素的外边距)box.onmousemove = function(event) {box.innerHTML = '鼠标在视口上的位置：'+event.clientX +','+event.clientY+'<br>'box.innerHTML+= '鼠标在目标元素上的位置：'+event.offsetX+','+event.offsetY}
案例：拖拽
// 获取元素var box = document.querySelector('#box')// 监听鼠标按键按下的事件（修改背景颜色，获取mouesemove事件的监听，相关位置box.onmousedown = function(event) {box.style.backgroundColor = 'pink';// 获取鼠标在目标元素的位置var eleLeft = event.offsetX;var eleTop = event.offsetY;// 监听事件移动事件document.onmousemove = function(event) {// 获取鼠标在视口上的位置var vpLeft = event.clientX;var vpTop = event.clientY;// 计算box的目标位置var left = vpLeft - eleLeft;var top = vpTop - eleTop;// 限定位置的范围if (left < 0) {left = 0;} else if (left>(document.documentElement.clientWidth-box.offsetWith)) {left = document.documentElement.clientWidth-box.offsetWith;}if (top < 0) {top = 0;}else if (top>(document.documentElement.clientHeight-box.offsetHeight)) {top = document.documentElement.clientHeight-box.offsetHeight;}// 根据鼠标在视口上的位置调整box元素的位置box.style.left = left +'px'box.style.top = top +'px'}}// 监听鼠标按键抬起的事件（恢复背景颜色，解除mousemove事件的监听box.onmouseup = function() {// 恢复背景颜色box.style.backgroundColor = ''// 解除mousemove事件的监听document.onmousemove = null;}
3.2 键盘事件
keydown键盘按键按下keyup键盘按键抬起keypress键盘按键按下，用于可输入字符按键
1. 哪些元素可以监听键盘事件？
① document
② 可以获取焦点的元素（表单控件，尤其是可输入的元素）
2. keydown 和 keypress 的区别？
① keydown 所有的按键按下都可以触发，无法区分大小写按键。
② keypress 只有可输入字符按键按下才可以触发，可以区分大小写按键。
3. 如何获取按下的是哪个按键？
使用 event 对象中的属性：
evnet.keyCode 获取按键对应的 ascii 值 65
event.which 同 keyCode 65
event.key 获取按键的字符值。 a
//在document监听键盘按键按下keydowndocument.onkeydown = function(event) {console.log('按键键盘按下：',event.keyCode,event.which,event.key)document.body.style.backgroundColor = 'red'}// 获取textarea元素var textareaBox = document.querySelector('textarea')// 在元素上监听keypress（会冒泡到keydown,会区分大小写textareaBox.onkeypress = function(event) {console.log('keypress',event.keyCode)}
案例：实时获取输入框中的文字
// 获取输入框元素var input = document.querySelector('#bankCardInput');// 获取放大显示的元素var resBox = document.querySelector('#res');// 给 input 监听键盘按键抬起事件input.onkeyup = function() {resBox.innerHTML = input.value;};
3.3 文档事件
load页面中所有的一切加载完毕就会触发，可以监听到window上或者body元素DOMContentLoaded页面中所有的元素加载完毕就会触发，可以监听在window或者document上， 只能使用 addEventListener 监听事件beforeunload当关闭网页的时候触发
load 事件与 DOMContentLoaded 事件的区别：
① load 事件是页面中所有的一切加载完毕才能触发，包括元素以及外部资源。
② DOMContentLoaded 事件是页面中所有的元素加载完毕就可以触发，不包括外部资源。
// 给window监听load事件（页面中所有的一切加载完毕会再触发）window.onload = function() {// 获取box元素var box = document.querySelector('#box')console.log(box)}// DOMContentLoaded 新事件（会先触发，等到页面中所有的元素触发再触发window.addEventListener('DOMContentLoaded', function() {console.log('DOMContentLoaded');// 获取 box 元素var box = document.querySelector('#box');console.log(box);})
3.4 表单事件
submit当表单提交的时候触发，该事件监听到form元素reset当表单重置的时候触发，该事件监听到form元素focus当表单控件获取焦点的时候触发blur当表控件单失去焦点的时候触发select输入框或文本域中的内容被选中change对于输入框，内容改变且失去焦点才会触发；适合用于select
案例：表单验证
(function() {// 获取元素var inputBox = document.querySelector('#ageInput')var spanBox = document.querySelector('#ageCheck')// 给input监听失去焦点的事件inputBox.onblur = function() {// 判断用户的输入if (this.value >= 0 && this.value <= 200) {spanBox.innerHTML = '您的年龄可用';spanBox.style.color = 'green'} else {spanBox.innerHTML = '请输入正确的年龄'spanBox.style.color = 'red'}}})()
案例：地址联动
// 定义省的信息var provs = ['江苏', '浙江', '安徽', '河南', '江西'];// 定义城市信息var citys = [['南京', '苏州', '无锡', '常州', '南通'],['杭州', '宁波', '温州', '嘉兴', '绍兴'],['合肥', '安庆', '马鞍山', '芜湖', '阜阳'],['郑州', '洛阳', '开封', '驻马店', '南阳'],['南昌', '九江', '赣州', '宜春', '抚州']];// 获取元素var provSel = document.querySelector('#provSel')var citySel = document.querySelector('#citySel');// 根据省的信息，添加第一个select的下拉选项provs.forEach(function(item, index) {provSel.add(new Option(item, index));})// 给第一个select监听change事件provSel.onchange = function() {// 清空第二个selectcitySel.length = 0;// 获取所选的是哪个下拉选项var index = this.value;// 取出城市信息，第二个select添加下拉选项citys[index].forEach(function(item) {citySel.add(new Option(item))})}// 使用代码触发change事件provSel.onchange();})()
