说明：DOM事件是JavaScript学习过程中非常重要的一个环节。

一、事件

1.事件

2.事件三要素

3.事件流的三个阶段

二、相关API

1.窗口事件

①当窗口获得焦点时候onfocus

②窗口加载完成后onload

③获得焦点时候改变背景颜色

④oninput 当文本框内容改变时，立即将改变内容输出在控制台

2.表单事件

3.键盘事件

①键盘按下事件onkeydown

②键盘松开事件onkeyup

③按下并松开事件onkeypress

④方向键操作盒子案例

4.鼠标事件

前言：今天我们首先会简单介绍一下事件流的相关知识点，之后我们会从窗口事件，表单事件，键盘事件，鼠标事件四个方面详细讲解相关API的使用。

一、事件

1.事件

事件：触发-响应机制。
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。

2.事件三要素

事件源:触发(被)事件的元素
事件名称: click 点击事件
事件处理程序:事件触发后要执行的代码(函数形式)

3.事件流的三个阶段

捕获：从 window 对象传到目标元素。
目标阶段：事件通过捕获，到达目标元素，这个阶段就是目标阶段。
冒泡：从目标元素传到 Window 对象

二、相关API

1.窗口事件

获得焦点事件：

①当窗口获得焦点时候onfocus

window.onfocus = function(){document.write("窗口获得了焦点");}当窗口失去焦点时候onblurwindow.onblur = function(){console.log("窗口失去了焦点")}

②窗口加载完成后onload

window.onload = function(){console.log("窗口加载完成")}窗口大小改变onresizewindow.onresize = function(){alert("窗口大小改变")}

③获得焦点时候改变背景颜色

var userCode = document.getElementById("userCode");userCode.onfocus = function(){this.style.backgroundColor = "red";//this指定当前窗口}console.log("这个")onchange 内容改变事件userCode.onchange = function () {console.log(userCode.value);}

④oninput 当文本框内容改变时，立即将改变内容输出在控制台

userCode.oninput = function () {console.log(userCode.value);}oninvalid获取表单 未能提交时userCode.oninvalid = function () {console.log("请您完成表单的内容!");}onselect当文本框内容被选中时userCode.onselect = function () {// thisconsole.log("您已经选择了文本框!");}

2.表单事件

表单验证案例：

<html><head><meta charset="utf-8"><title></title></head><body><!-- 账号  不能为空  只能为 数字 字母  6-18 --><!-- 密码  不能为空  只能为 数字 字母  首字母大写 6-12 --><!-- 确认密码   不能为空  与密码一致 --><!-- 确认密码   必须选择 除了0 以外的  与密码一致 --><!-- 身份证号码  不能为空 最后一位为 X 或 x --><form action="#" method="get" id="mForm"><!-- border 边框  align 水平对齐方式 --><table border="1" align="center"><tr><td>账号：</td><td><input type="text" id="zhanghao"/></td></tr><tr><td>密码：</td><td><input type="password" id="mimaOne"/></td></tr><tr><td>确认密码：</td><td><input type="password" id="mimaTwo"/></td></tr><tr><td>手机号码：</td><td><input type="text" id="phone"/></td></tr><tr><td>性别：</td><td><label><input type="radio" name="sex" checked/>男</label><input type="radio" name="sex" id="sex1"/><label for="sex1">女</label></td></tr><tr><td>年级：</td><td><select id="nianji"><option value="0">---请选择---</option><option value="1">一年级</option><option value="2">二年级</option><option value="3">三年级</option><option value="4">四年级</option></select></td></tr><tr><td>邮箱：</td><td><input type="text" id="email"/></td></tr><tr><td>身份证号码：</td><td><input type="text" id="shenfenzheng"/></td></tr><tr><td colspan="2" align="center"><input type="submit"/><input type="reset"/></td></tr></table></form><script>//获取表单var mForm = document.getElementById("mForm");//表单//根据id获取值let zhanghao = document.getElementById("zhanghao");//账号let mimaOne = document.getElementById("mimaOne");//密码let mimaTwo = document.getElementById("mimaTwo");//确认密码let phone = document.getElementById("phone");//电话let sex = document.getElementById("sex1");//性别let nianji = document.getElementById("nianji");//年级let email = document.getElementById("email");//邮箱//正则表达式var code = /^[A-Za-z0-9]{6,16}$///账号var pass = /^(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*()_+?<>])[^]{6,}$/;var ph = /^1[3456789]\d{9}$/;var em = /^[a-zA-Z0-9_-]{4,16}@[a-zA-Z0-9_-]{2,}\.+[comn]{2,3}$/;var uId = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;mForm.onsubmit = function(){//删除多余spanvar spanSum = document.getElementsByTagName("span");if (spanSum != '') {for (let i = 0; i < spanSum.length; i++) {spanSum[i].remove();}}var err = document.createElement("span");if(zhanghao.value==''){err.innerHTML='账号不能为空';err.style.color='red';zhanghao.parentElement.appendChild(err);}else if(!code.test(zhanghao.value)){err.innerHTML='账号格式不正确';err.style.color='red';zhanghao.parentElement.appendChild(err);}else if(mimaOne.value==''){err.innerHTML='密码不能为空';err.style.color='red';mimaOne.parentElement.appendChild(err);}else if(!pass.test(mimaOne.value)){err.innerHTML='密码格式不正确';err.style.color='red';mimaOne.parentElement.appendChild(err);}else if(mimaTwo.value==''){err.innerHTML='密码不能为空';err.style.color='red';mimaTwo.parentElement.appendChild(err);}else if(!pass.test(mimaTwo.value)){err.innerHTML='密码格式不正确';err.style.color='red';mimaTwo.parentElement.appendChild(err);}else if(mimaOne.value!=mimaTwo.value){err.innerHTML='密码不一致';err.style.color='red';mimaTwo.parentElement.appendChild(err);}else if(phone.value==''){err.innerHTML='电话号码不能为空';err.style.color='red';phone.parentElement.appendChild(err);}else if(!ph.test(phone.value)){err.innerHTML='手机号码格式错误';err.style.color='red';phone.parentElement.appendChild(err);}else if(nianji.value==''){err.innerHTML='请选择年级';err.style.color='red';nianji.parentElement.appendChild(err);}else if(email.value==''){err.innerHTML='邮箱不能为空';err.style.color='red';email.parentElement.appendChild(err);}else if(em.test(email)){err.innerHTML='邮箱格式不正确';err.style.color='red';email.parentElement.appendChild(err);}else if(shenfenzheng.value==''){err.innerHTML='身份证不能为空';err.style.color='red';shenfenzheng.parentElement.appendChild(err);}else if(uId.test(shenfenzheng.value)){err.innerHTML='身份证格式不正确';err.style.color='red';shenfenzheng.parentElement.appendChild(err);}else{return true;}return false;}</script></body>
</html>

3.键盘事件

①键盘按下事件onkeydown

window.onkeydown = function(event){//解决兼容问题event = event || window.event;console.log("键盘按下了" + event.keyCode);if(event.keyCode==13){console.log("按下了回车");}}

②键盘松开事件onkeyup

window.onkeyup = function(event){//解决兼容问题event = event || window.event;console.log("键盘松开了"+event.keyCode);if(event.keyCode==13){console.log("松开了回车");}}

③按下并松开事件onkeypress

window.onkeypress = function (event) {event = event || window.event;console.log("键盘按下了" + event.keyCode);if (event.keyCode == 13) {console.log('按下了回车');}}

④方向键操作盒子案例

CSS部分：
<style>*{margin: 0px;padding: 0px;}.divStyle {width: 100px;height: 100px;background: red;position: absolute;}</style>
HTML部分：var box = document.getElementById("box");document.onkeydown = function (event) {event  = event ||window.event;switch (event.keyCode) {case 37:box.style.left = box.offsetLeft - 10+'px';break;case 39:box.style.left = box.offsetLeft + 10+'px';break;case 38:box.style.top = box.offsetTop - 10+'px';break;case 40:box.style.top = box.offsetTop + 10+'px';break;}}

4.鼠标事件

onmouseenter：当鼠标进入了当前的DIV
onmouseleave：当鼠标移出了当前的DIV
onscroll：当滚动元素的滚动条运行时
onmousewheel：当鼠标的滚轮运行时

案例代码：

<html>
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div onmouseenter="divMouseenter()"onmouseleave="divMouseleave()"style="width: 300px;height: 300px;background: red"><div onmouseenter="divMouseenter()"onmouseleave="divMouseleave()"style="width: 100px;height: 100px;background: pink"></div>
</div><div id="box" style="overflow: scroll;width: 200px;height: 200px;">
这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
</div><script>/* onmouseenter ： 可以阻止事件冒泡 */function divMouseenter() {console.log("当鼠标进入了当前的DIV");}/* onmouseleave ： 可以阻止事件冒泡 */function divMouseleave() {console.log("当鼠标移出了当前的DIV");}document.getElementById("box").onscroll = function () {console.log("当滚动元素的滚动条运行时");}/* 当鼠标的滚轮运行时 */window.onmousewheel=function (){console.log("当鼠标的滚轮运行时");}
</script>
</body>
</html>

又是一年中秋时，今年你吃的什么味道的月饼呢(*^▽^*)

怀念学习油泼辣子口味的YYDS！！！

JavaScript中DOM文档事件相关推荐

JavaScript中函数文档注释
/** 方法说明 * @method 方法名 * @for 所属类名 * @param{参数类型}参数名参数说明 * @return {返回值类型} 返回值说明 */ 转载于:https://www ...
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（推荐七）
前言学习是有趣的,但有过滤的学习内容就更好,本博主就专门为刚接触javascript客户端编程的朋友提供及分享个人学习经历!建议大家看看:(汤姆大叔的博客) http://www.cnblogs.c ...
[js点滴]JavaScript之文档事件08
文档事件 beforeunload事件,unload事件,load事件,error事件,pageshow事件,pagehide事件以下事件与网页的加载与卸载相关. (1)beforeunload事件 ...
Javascript 强制浏览器渲染Dom文档
在Cordova+Framework7开发Hybrid App时,在iPhone 7上遇到一个诡异的现象(Chrome浏览器.Android都正常):js修改手风琴中的input文本框的值后,但页面仍 ...
BOM 浏览器对象模型和DOM 文档对象模型
浏览器对象模型BOM 1. 浏览器对象模型介绍 BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的.可 ...
Javascript中DOM技术的的简单学习
第十四课 DOM技术概述 1:DOM概述文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构 ...
day-16 jquery的DOM文档操作及bootstrap
1. jquery的DOM文档操作 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天--2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

JavaScript中DOM文档事件

一、事件

1.事件

2.事件三要素

3.事件流的三个阶段

二、相关API

1.窗口事件

①当窗口获得焦点时候onfocus

②窗口加载完成后onload

③获得焦点时候改变背景颜色

④oninput 当文本框内容改变时，立即将改变内容输出在控制台

2.表单事件

3.键盘事件

①键盘按下事件onkeydown

②键盘松开事件onkeyup

③按下并松开事件onkeypress

④方向键操作盒子案例

4.鼠标事件

JavaScript中DOM文档事件相关推荐

最新文章

热门文章

JavaScript中DOM文档事件

一、事件

1.事件

2.事件三要素

3.事件流的三个阶段

二、相关API

1.窗口事件

①当窗口获得焦点时候onfocus

②窗口加载完成后onload

③获得焦点时候改变背景颜色

④oninput 当文本框内容改变时 ，立即将改变内容 输出在控制台

2.表单事件

3.键盘事件

①键盘按下事件onkeydown

②键盘松开事件onkeyup

③按下并松开事件onkeypress

④方向键操作盒子案例

4.鼠标事件

JavaScript中DOM文档事件相关推荐

最新文章

热门文章

④oninput 当文本框内容改变时，立即将改变内容输出在控制台