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  rowIndex   insertCell()   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();})()

JS-鼠标-键盘-文档-表单事件相关推荐

鼠标事件、表单事件、键盘事件、焦点事件
事件介绍当我们点击一个按钮的时候,会弹出一个对话框.在JavaScript中, "点击"这个事情就看作一个事件."弹出对话框"其实就是我们在点击事件中做的一些 ...
史上最全的常用事件：移动端事件及PC端：鼠标/键盘/表单事件
PC端事件鼠标事件: onclick点击 onmouseover鼠标移入 onmouseout鼠标移出 onmousedown鼠标按下 onmouseup鼠标抬起 onmousemove鼠标移动 o ...
JavaScript学习第十六天（键盘事件、表单事件、拖拽事件、框架事件、媒体事件）
文章目录键盘事件表单事件剪贴板事件拖拽事件打印事件框架事件媒体事件总结键盘事件 onkeydown 键盘按下事件,当有按键按下时触发 onkeyup 键盘松开事件,当有按键被松开时触 ...
HTML——JS—表单事件+表单提交
目录表单事件表单提交表单事件 <!DOCTYPE html> <html><head><meta charset="utf-8"&g ...
Ext JS 6学习文档-第3章-基础组件
Ext JS 6学习文档-第3章-基础组件基础组件在本章中,你将学习到一些 Ext JS 基础组件的使用.同时我们会结合所学创建一个小项目.这一章我们将学习以下知识点: 熟悉基本的组件 – 按钮, ...
JavaScript表单事件获取焦点：focus 失去焦点：blur 输入事件：input 变化事件：change
JavaScript表单事件焦点处理焦点处理主要包括focus(获取焦点)和blur(失去焦点)事件类型.所谓焦点,就是激活表单字段,使其可以响应键盘事件. 获取焦点:focus 当单击或使用Ta ...
web前端学习笔记26-事件类型——一般事件、页面事件、表单事件
一.事件类型的分类事件分为一般事件.页面事件和表单事件二.一般事件关键字释义关键字释义 click 单击事件 dblclick 双击事件 mousemove 鼠标移动事件 mouseove ...
html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
JavaScript 、if else语句判断、jQurey表单事件
开发工具与关键技术:VS 作者:黄金燕年级: 1804 撰写时间: 2019年4月6日一．JS里面的 String 字符串对象在之前的学习中已经使用字符串对象了,定义字符串的方法就是直接赋值.比 ...

JS-鼠标-键盘-文档-表单事件

JS-鼠标-键盘-文档-表单事件

1 回顾

1.1 节点创建、添加、删除、替换、克隆

1.2 HTML DOM

1.3 document 对象和 documentFragment 对象

1.4 事件

2 事件回调函数中 this 的指向

案例:选项卡

3 常用事件总结

3.1 鼠标事件

案例：拖拽

3.2 键盘事件

案例：实时获取输入框中的文字

3.3 文档事件

3.4 表单事件

案例：表单验证

案例：地址联动

JS-鼠标-键盘-文档-表单事件相关推荐

最新文章

热门文章