说明:DOM事件是JavaScript学习过程中非常重要的一个环节。
目录
④oninput 当文本框内容改变时 ,立即将改变内容 输出在控制台
前言:今天我们首先会简单介绍一下事件流的相关知识点,之后我们会从窗口事件,表单事件,键盘事件,鼠标事件四个方面详细讲解相关API的使用。
一、事件
1.事件
事件:触发-响应机制。
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
2.事件三要素
- 事件源:触发(被)事件的元素
- 事件名称: click 点击事件
- 事件处理程序:事件触发后要执行的代码(函数形式)
3.事件流的三个阶段
- 捕获:从 window 对象传到 目标元素。
- 目标阶 段:事件通过捕获,到达目标元素,这个阶段就是目标阶段。
- 冒泡:从目标元素传到 Window 对象
二、相关API
1.窗口事件
获得焦点事件:
①当窗口获得焦点时候onfocus
window.onfocus = function(){
document.write("窗口获得了焦点");
}
当窗口失去焦点时候onblur
window.onblur = function(){
console.log("窗口失去了焦点")
}
②窗口加载完成后onload
window.onload = function(){
console.log("窗口加载完成")
}
窗口大小改变onresize
window.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 () {
// this
console.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(){
//删除多余span
var 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!!!