本文详细介绍了JavaScript中的各种事件，如单击、双击、鼠标移动、键盘输入、焦点变化、表单提交、下拉菜单联动以及轮播图实现。通过实例展示了如何使用这些事件处理用户交互，包括修改元素属性和创建动态效果。
一.js中的事件管理
js中的事件: 用户对前台页面做出的一些操作 来触发一些函数
例如用户的单击 双击 鼠标移入 移出 键盘的输入 等等等等
常见的事件如下:
1.单击事件: onclick 用处最多.
2.双击事件: ondblclick
3.鼠标移入事件: onmouseover
4.鼠标移出事件: onmouseout
5.键盘输入事件:onkeyup
6.失去焦点事件:onblur
7.获取焦点事件:onfocus
8.表单提交事件:onsubmit
9.下拉菜单事件:onchange
事件的语法如下:
xxx表示获取的元素节点 abc表示什么事件
xxx.onabc = function(){ }
二.单击事件的案例
需求如下:点击按钮 来回展示开始点名或停止点名
思路:获取到button标签,然后给它赋予一个点击事件.
接着判断button标签内部的value值.根据值来进行判断.进而修改/
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function(){
//获取button的文本值.
var text = btn.innerText ;
if(text=="开始点名"){
btn.innerText = "停止点名"
}else{
btn.innerText = "开始点名";
}
}
</script>
三.双击事件的案例
<style>
div{
width: 230px;
height: 230px;
text-align: center;
border : 1px solid black;
display: none;
}
</style>
</head>
<body>
<button>双击打开登录页面</button>
<div>
<h3>登录弹窗！！</h3>
账号<input type="text" placeholder="请输入你的账号" /> <br>
密码<input type="password" placeholder="请输入你的密码" /> <br><br><br>
<button>登录</button> <button>返回</button>
</div>
<script>
思考:浏览器中的弹窗为啥那么好看
但是我们学习的三个弹窗 一个比一个丑
其实浏览器的弹窗 并不是真正的弹窗.
思路: 就是一个提前绘制好的一个div页面.然后将其隐藏. 当用户触发的时候就蹦出来.实现一个弹窗的效果.
需求:双击打开登录页面
document.getElementsByTagName("button")[0].ondblclick = function(){
document.getElementsByTagName("div")[0].style.display = "block";
}
document.getElementsByTagName("button")[2].onclick = function(){
document.getElementsByTagName("div")[0].style.display = "none";
}
</script>
四.鼠标移入移出事件
<style>
.a{
width: 200px;
height: 200px;
}
.b{
width: 400px;
height: 400px;
}
</style>
<img class="a" src="img/1.PNG">
<script>
//需求 鼠标移入图片内部 ,图片放大 鼠标移出图片 图片还原
var img = document.getElementsByTagName("img")[0];
img.onmouseover = function(){
// img.style.width = "400px";
// img.style.height = "400px";
img.className = "b";
}
img.onmouseout = function(){
// img.style.width = "200px";
// img.style.height = "200px";
img.className = "a";
}
</script>
五.演示键盘输入事件
小写字母：<input type="text" id="a" /> <br>
大写字母：<input type="text" id="b" />
<script>
在第一个文本框输入小写字母.下面的文本框默认输出上面的与之对应的大写字母
思路:给第一个文本框加上键盘输入事件（每敲击一下键盘就触发一下事件）.
获取第一个文本框的值.然后赋予给第二个文本框
var i1 = document.getElementById("a");
var i2 = document.getElementById("b");
i1.onkeyup = function(){
i2.value = i1.value.toUpperCase();
}
</script>
六.演示获取焦点和失去焦点事件
账号：<input type="text" id="a" /> <span id="c"></span> <br>
<script>
var username = document.getElementById("a");
var password = document.getElementById("a");
var tip1 = document.getElementById("c");
var tip2 = document.getElementById("d");
需求:输入账号之后.提示账号输入规则.
思路给文本框加上获取焦点事件 给第一个span标签生产一个提示用于
username.onfocus = function(){
tip1.innerText = "账号的长度要在6-10之间";
tip1.style.color = "red";
}
需求2:输入完成之后,要判断账号是否符合格式.
思路:失去焦点之后判断.
username.onblur = function(){
var username123 = username.value;
if (username123.length >=6 && username123.length<=10) {
tip1.innerText = "√";
tip1.style.color = "green";
} else{
tip1.innerText = "X";
tip1.style.color = "red";
}
}
</script>
七.复习表单
表单：form
应用场景： 用户登录、 用户注册 添加一个商品信息
凡是需要将多个数据打包发送的 都可以使用表单。
form表单三大属性:
A.action表示将表单提交给谁。一般放一个URL地址 其中#表示不提交
B.method表示表单的提交方式：只有2个选择、1.get 2.post 默认是get。
区别如下：
get的速度快。因为只能携带极少的数据。 不安全，会将表单数据全部显示在url地址。是客户端行为（只依赖浏览器）
post的速度慢：因为可以携带理论上无限大的数据。安全。不会将表单数据全部显示在url地址。是服务端行为（依赖服务器）
C.enctype：表示该表单是什么类型的表单。
默认值1： application/x-www-form-urlencoded 表示普通表单 所以：绝大部分表单都可以不用加。
可选值2： multipart/form-data 表示文件上传的表单。如果需要文件上传就只能用这个。
可选值3： text/plain 表示大文本类型 常用于国家化传输邮件。
如何将表单打包发送给action的路径：
通过提交按钮：以下三种方式 均可。 一般使用第三种。
1 <button>提交（登录）</button>
2 <button type="submit">登录提交</button>
3 <input type="submit" value="登录提交" />
后台如何获取表单内部的数据。
只需要在表单内部的标签元素中 添加name属性即可。（必须要加的，否则获取不到值）
后台只需要根据name来取值。
串讲：button标签的易错事项。
button标签的完整写法：
<button type="xxx">按钮</button>
其中type的取值有3个：
1.submit 默认值 表示提交按钮
2.button 可选择 表示普通的按钮
3.reset 可选择 表示重置按钮
button标签中type属性的默认值是 submit 如果该标签放在form表单则会提交表单。
但是如果没在，就是一个普通的按钮
<form action="#" method="post" enctype="text/plain" >
账号：<input type="text" id="a" name="username" /> <br>
密码：<input type="password" id="b" name="password" /> <br>
<input type="submit" value="登录提交" />
</form>
八.演示表单提交事件
form id="f" action="#" method="post">
账号：<input type="text" id="a" /> <span id="c"></span> <br>
密码：<input type="password" id="b" /> <span id="d"></span> <br>
<input type="submit" value="登录" />
</form>
<script>
var username = document.getElementById("a");
var password = document.getElementById("b");
var tip1 = document.getElementById("c");
var tip2 = document.getElementById("d");
var f = document.getElementById("f");
需求:输入账号之后.提示账号输入规则.
思路给文本框加上获取焦点事件 给第一个span标签生产一个提示用于
username.onfocus = function(){
tip1.innerText = "账号的长度要在6-10之间";
tip1.style.color = "red";
}
需求2:输入完成之后,要判断账号是否符合格式.
思路:失去焦点之后判断.
username.onblur = function(){
var username123 = username.value;
if (username123.length >=6 && username123.length<=10) {
tip1.innerText = "√";
tip1.style.color = "green";
} else{
tip1.innerText = "X";
tip1.style.color = "red";
}
}
password.onfocus = function(){
tip2.innerText = "密码的长度要在6-10之间";
tip2.style.color = "red";
}
//需求2:输入完成之后,要判断账号是否符合格式.
//思路:失去焦点之后判断.
password.onblur = function(){
var password123 = password.value;
if (password123.length >=6 && password123.length<=10) {
tip2.innerText = "√";
tip2.style.color = "green";
} else{
tip2.innerText = "X";
tip2.style.color = "red";
}
}
//onsubmit和其他的事件有个不同之处. 需要返回值的默认是return true表示提交 return false就表示不提交
f.onsubmit = function(){
if(tip1.innerText=="√" && tip2.innerText=="√" ){
return true;
}else{
alert("请按照要求写");
return false;
}
}
</script>
九.下拉菜单事件
<script>
onchange事件: 一般只会作用于下拉框 点击下拉框且改变值.
适用场景: 银行卡的互动. 地址栏的联动
var a = document.getElementById("a");
var b = document.getElementById("b");
需求实现两个下拉框的联动效果.
思路:给第一个下拉框加上一个onchange事件
思路:获取第一个下拉框的第几个元素(下标)
思路:将上一步的思路的下标 赋予给第二个下拉框即可
a.οnchange= function(){
如何获取下拉框的下标
// console.log(a.selectedIndex);
b.selectedIndex = a.selectedIndex;
}
b.οnchange= function(){
如何获取下拉框的下标
// console.log(a.selectedIndex);
a.selectedIndex = b.selectedIndex;
}
</script>
十.修改元素的属性
<button>替换图片</button>
<script>
html元素是有很多属性的.
例如 id class name src href
document.getElementsByTagName("button")[0].onclick = function(){
将xxx元素的aaa属性改成bbb
//xxx.setAttribute("aaa","bbb");
//var a = xxx.getAttribute("aaa");表示xxx的aaa属性的值
// document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
if(document.getElementsByTagName("img")[0].getAttribute("src") == "img/1.PNG" ){
document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");
}else{
document.getElementsByTagName("img")[0].setAttribute("src","img/1.PNG");
}
}
</script>
十一._简化版的轮播图
<style>
img{
width: 100px;
height: 100px;
}
</style>
<img src="img/1.PNG" />
<script>
//只要有需求: 每隔一段事件就要作什么事 就需要联想到使用定时器
var img = document.getElementsByTagName("img")[0];
//实现图片的替换 但是图片的文件名可能不是有规律.
//所以可以将图片的所有文件名路径名 存到数组中. 数组是有规律的.
var src_1 = ["img/1.PNG","img/2.PNG","img/3.PNG","img/4.PNG"];
var index = 1;
setInterval(function(){
img.setAttribute("src",src_1[index]);
index++;
if(index==4){
index = 0;
}
},1000);
</script>
667
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
