|
|
|
示例 2 : 鼠标事件 示例 3 : 键盘事件 示例 4 : 点击事件 示例 5 : 变化事件 示例 6 : 提交事件 示例 7 : 加载事件 示例 8 : 当前组件 示例 9 : 阻止事件的发生 示例 10 : 练习-下拉菜单 示例 11 : 答案-下拉菜单 示例 12 : 练习-验证账号是否已经存在 示例 13 : 答案-验证账号是否已经存在 示例 14 : 练习-选中所有的checkbox 示例 15 : 答案-选中所有的checkbox
焦点相关的事件，分别有获取焦点和失去焦点
当组件获取焦点的时候，会触发onfocus事件 当组件失去焦点的时候，会触发onblur事件 <input type="text" onfocus="f()" onblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>
<script>
function f(){
document.getElementById("message").innerHTML="输入框1获取了焦点";
}
function b(){
document.getElementById("message").innerHTML="输入框1丢失了焦点";
}
</script>
<input type="text" onfocus="f()" onblur="b()" id="input1" placeHolder="输入框1" >
<br>
<br>
<input type="text" id="input2" placeHolder="输入框2">
<br>
<br>
<div id="message"></div>
<script>
function f(){
document.getElementById("message").innerHTML="输入框1获取了焦点";
}
function b(){
document.getElementById("message").innerHTML="输入框1丢失了焦点";
}
</script>
鼠标事件，由鼠标按下，鼠标弹起，鼠标经过，鼠标进入，鼠标退出几个事件组成
当在组件上鼠标按下的时候，会触发onmousedown事件 当在组件上鼠标弹起的时候，会触发onmouseup事件 当在组件上鼠标经过的时候，会触发onmousemove事件 当在组件上鼠标进入的时候，会触发onmouseover事件 当在组件上鼠标退出的时候，会触发onmouseout事件 注: 当鼠标进入一个组件的时候，onmousemove和onmouseover都会被触发，区别在于无论鼠标在组件上如何移动，onmouseover只会触发一次，onmousemove每次移动都会触发 <input type="button" onmousedown="down()" onmouseup="up()" value="用于演示按下和弹起" >
<br>
<br>
<input type="button" onmousemove="move()" value="用于演示鼠标经过" >
<br>
<br>
<input type="button" onmouseover="over()" value="用于演示鼠标进入" >
<br>
<br>
<input type="button" onmouseout="out()" value="用于演示鼠标退出" >
<br>
<br>
<div id="message"></div>
<script>
var number = 0;
function down(){
document.getElementById("message").innerHTML="按下了鼠标";
}
function up(){
document.getElementById("message").innerHTML="弹起了鼠标";
}
function move(){
document.getElementById("message").innerHTML="鼠标经过次数:"+(++number);
}
function over(){
document.getElementById("message").innerHTML="鼠标进入次数:"+(++number);
}
function out(){
document.getElementById("message").innerHTML="鼠标退出";
number = 0;
}
</script>
键盘事件，由键盘按下keydown，键盘按下keypress,键盘弹起几个事件组成
当在组件上键盘按下的时候，会触发onkeydown事件 当在组件上键盘按下的时候，也会触发onkeypress事件 当在组件上键盘弹起的时候，会触发onkeyup事件 注: onkeypress 是当按下并弹起的组合动作，这个说法是错误的 都是用于表示键盘按下，onkeydown和onkeypress的区别在什么呢？ onkeydown 可以获取所有键，除了打印键Prts 可以获取用户是否点击了修饰键 (ctrl,shift,alt) 不能判断输入的是大写还是小写 onkeypress 只能获取字符键 不能获取用户是否点击了修饰键 (ctrl,shift,alt) 可以判断输入的是大写还是小写 但是！ 在不同的浏览器上，以上规则是不成立的。说这些都没有卵用，你无法控制用户到底使用哪种浏览器。 所以，只要记得keydown和keypress都表示点下了键。。。即可 “记得要先用鼠标选中该组件，然后敲击键盘”
<br>
<input type="button" onkeydown="down(event)" value="用于演示按下keydown" >
<br>
<br>
<input type="button" onkeypress="press(event)" value="用于演示按下keypress" >
<br>
<br>
<input type="button" onkeyup="up()" value="用于演示弹起" >
<br>
<br>
<div id="message">
</div>
<script>
var number =0;
function down(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
function up(){
document.getElementById("message").innerHTML="弹起了键盘";
}
function press(e){
var text = "按下了键" + e.keyCode;
if(e.shiftKey==1)
text += " 并且按下了shift键";
document.getElementById("message").innerHTML=text ;
}
</script>
点击事件，由单击，双击按两个事件组成
当在组件上单击的时候，会触发onclick事件 当在组件上双击的时候，会触发ondblclick事件 注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果 注2: 自定义函数不要使用click()，这是保留函数名。 <input type="button" onclick="singleClick()" ondblclick="doubleClick()" value="用于演示单击和双击" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
function doubleClick(){
document.getElementById("message").innerHTML="双击按钮";
}
</script>
<input type="button" onclick="singleClick()" ondblclick="doubleClick()" value="用于演示单击和双击" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(){
document.getElementById("message").innerHTML="单击按钮";
}
function doubleClick(){
document.getElementById("message").innerHTML="双击按钮";
}
</script>
当组件的值发生变化的时候，会触发onchange事件
注：对于输入框而言，只有在失去焦点的时候，才会触发onchange，所以需要点击一下"按钮" 造成输入框失去焦点 <input type="text" id="t1" onchange="change()" value="" >
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
</script>
<input type="text" id="t1" onchange="change()" value="" >
<br>
<br>
<input type="button" value="令输入框失去焦点的按钮" >
<br>
<br>
<div id="message"></div>
<script>
function change(){
var message = document.getElementById("message");
var t1 = document.getElementById("t1");
message.innerHTML = "输入框的值变为了: "+ t1.value;
}
</script>
<form action="/study/login.jsp" onsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
alert("提交表单");
}
</script>
<form action="/study/login.jsp" onsubmit="login()">
账号：<input type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
alert("提交表单");
}
</script>
当整个文档加载成功，或者一个图片加载成功，会触发加载事件
当body元素或者img@加载的时候，会触发onload事件 <script>
function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
}
function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
}
</script>
<body onload="loadBody()">
<div id="message1"></div>
<div id="message2"></div>
</body>
<img onload="loadImg()" src="https://how2j.cn/example.gif"/>
<script>
function loadBody(){
document.getElementById("message1").innerHTML="文档加载成功";
}
function loadImg(){
document.getElementById("message2").innerHTML="图片加载成功";
}
</script>
<body onload="loadBody()">
<div id="message1"></div>
<div id="message2"></div>
</body>
<img onload="loadImg()" src="https://how2j.cn/example.gif"/>
this表示触发事件的组件，可以在调用函数的时候，作为参数传进去
<input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" onclick="singleClick(this)" value="演示this的按钮2" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(button){
var s = "被点击的按钮上的文本是: "+button.value;
document.getElementById("message").innerHTML=s;
}
</script>
<input type="button" onclick="singleClick(this)" value="演示this的按钮1" >
<input type="button" onclick="singleClick(this)" value="演示this的按钮2" >
<br>
<br>
<div id="message"></div>
<script>
function singleClick(button){
var s = "被点击的按钮上的文本是: "+button.value;
document.getElementById("message").innerHTML=s;
}
</script>
比如在提交一个表单的时候，如果用户名为空，弹出提示，并阻止原本的提交
1. 在调用函数的时候，增加一个return 2. 在函数中，如果发现用户名为空，则返回false 3. 当onSubmit得到的返回值是false的时候，表单的提交功能就被取消了 <form method="post" action="/study/login.jsp" onsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
return true;
}
</script>
<form method="post" action="/study/login.jsp" onsubmit="return login()">
账号：<input id="name" type="text" name="name"> <br/>
密码：<input type="password" name="password" > <br/>
<input type="submit" value="登录">
</form>
<script>
function login(){
var name = document.getElementById("name");
if(name.value.length==0){
alert("用户名不能为空");
return false;
}
return true;
}
</script>
改进练习-下拉菜单风格，使得当鼠标移动到不同菜单的时候，显示不同的下拉菜单
<style>
a{
font-size:14px;
color: CornflowerBlue;
text-decoration: none;
}
div.menuweapon{
position: absolute;
left: 10px;
top: 20px;
}
div.menuarmor{
position: absolute;
left: 45px;
top: 20px;
}
div.menuhero{
position: absolute;
left: 80px;
top: 20px;
}
div.menu {
width:80px;
border: 1px solid lightgray;
margin-top:15px;
display:none;
}
div.menu a{
display:block;
font-size:14px;
font-family:宋体;
color: #888;
text-decoration: none;
padding:10 0 10 15;
}
div.menu a:hover
{
background-color: #f1f1f1;
}
</style>
<script>
function showmenu(type){
var menuDivs = document.getElementsByClassName("menu");
for(i=0;i<menuDivs.length;i++){
var d= menuDivs[i];
d.style.display="none";
}
var divClassName= "menu"+type;
var div = document.getElementsByClassName(divClassName)[0];
div.style.display="block";
}
</script>
<a href="#nowhere" onmouseover="showmenu('weapon')" > 武器 </a>
<a href="#nowhere" onmouseover="showmenu('armor')" > 护甲 </a>
<a href="#nowhere" onmouseover="showmenu('hero')" > 英雄 </a>
<div class="menu menuweapon" >
<a href="#nowhere"> 大剑 </a>
<a href="#nowhere"> 屠龙 </a>
<a href="#nowhere"> 倚天 </a>
<a href="#nowhere"> 七孔砖 </a>
</div>
<div class="menu menuarmor">
<a href="#nowhere"> 胸甲 </a>
<a href="#nowhere"> 护腕 </a>
<a href="#nowhere"> 头盔 </a>
<a href="#nowhere"> 鞋子 </a>
</div>
<div class="menu menuhero">
<a href="#nowhere"> 盖伦 </a>
<a href="#nowhere"> 提莫 </a>
<a href="#nowhere"> 安妮 </a>
<a href="#nowhere"> 死哥 </a>
</div>
<div style="height:200px"></div>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<style>
a{
font-size:14px;
color: CornflowerBlue;
text-decoration: none;
}
div.menuweapon{
position: absolute;
left: 10px;
top: 20px;
}
div.menuarmor{
position: absolute;
left: 45px;
top: 20px;
}
div.menuhero{
position: absolute;
left: 80px;
top: 20px;
}
div.menu {
width:80px;
border: 1px solid lightgray;
margin-top:15px;
display:none;
}
div.menu a{
display:block;
font-size:14px;
font-family:宋体;
color: #888;
text-decoration: none;
padding:10 0 10 15;
}
div.menu a:hover
{
background-color: #f1f1f1;
}
</style>
<script>
function showmenu(type){
var menuDivs = document.getElementsByClassName("menu");
for(i=0;i<menuDivs.length;i++){
var d= menuDivs[i];
d.style.display="none";
}
var divClassName= "menu"+type;
var div = document.getElementsByClassName(divClassName)[0];
div.style.display="block";
}
</script>
<a href="#nowhere" onmouseover="showmenu('weapon')" > 武器 </a>
<a href="#nowhere" onmouseover="showmenu('armor')" > 护甲 </a>
<a href="#nowhere" onmouseover="showmenu('hero')" > 英雄 </a>
<div class="menu menuweapon" >
<a href="#nowhere"> 大剑 </a>
<a href="#nowhere"> 屠龙 </a>
<a href="#nowhere"> 倚天 </a>
<a href="#nowhere"> 七孔砖 </a>
</div>
<div class="menu menuarmor">
<a href="#nowhere"> 胸甲 </a>
<a href="#nowhere"> 护腕 </a>
<a href="#nowhere"> 头盔 </a>
<a href="#nowhere"> 鞋子 </a>
</div>
<div class="menu menuhero">
<a href="#nowhere"> 盖伦 </a>
<a href="#nowhere"> 提莫 </a>
<a href="#nowhere"> 安妮 </a>
<a href="#nowhere"> 死哥 </a>
</div>
<div style="height:200px"></div>
改进练习-验证账号是否已经存在，把需要点击按钮进行验证去掉，当用户输入用户名的时候，就自动进行验证
<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
var firstChar = name.charAt(0);
if('a'==firstChar || 'A'==firstChar)
noMessage.style.display="inline";
else
yesMessage.style.display="inline";
}
}
</script>
<input id="name" placeholder="请输入账号名" onkeyup="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<html>
<script>
function check(){
var name = document.getElementById("name").value;
var noMessage= document.getElementById("noMessage");
var yesMessage= document.getElementById("yesMessage");
noMessage.style.display="none";
yesMessage.style.display="none";
if(0!=name.length){
var firstChar = name.charAt(0);
if('a'==firstChar || 'A'==firstChar)
noMessage.style.display="inline";
else
yesMessage.style.display="inline";
}
}
</script>
<input id="name" placeholder="请输入账号名" onkeyup="check()">
<span id="noMessage" style="color:red;display:none;">账号已经存在</span>
<span id="yesMessage" style="color:green;display:none;">账号可以使用</span>
</html>
有多个复选框
点击选中所有，所有的复选框都选中了 点击反向选择，反选复选框 <script>
</script>
<style>
a{
font-size:12px;
font-weight:bold;
color:SteelBlue;
text-decoration: none;
}
</style>
<script>
function selectAll(checkbox){
var checked = checkbox.checked;
var checkboxes= document.getElementsByTagName("input");
for(var i in checkboxes){
checkboxes[i].checked=checked?"checked":"";
}
}
function reverse(){
var checkboxes= document.getElementsByTagName("input");
for(var i in checkboxes){
if(0==i)
continue;
checkboxes[i].checked=checkboxes[i].checked?"":"checked";
}
}
</script>
<input type="checkbox" onclick="selectAll(this)" > 全选<br>
<input type="checkbox" > tokyo hot<br>
<input type="checkbox" > dota <br>
<input type="checkbox" > lol <br>
<input type="checkbox" > wow <br>
<input type="checkbox" > warcraft <br>
<input type="checkbox" > diablo <br>
<a href="#nowhere" onclick="reverse()">反选</a>
在查看答案前，尽量先自己完成，碰到问题再来查看答案，收获会更多
<script>
</script>
<style>
a{
font-size:12px;
font-weight:bold;
color:SteelBlue;
text-decoration: none;
}
</style>
<script>
function selectAll(checkbox){
var checked = checkbox.checked;
var checkboxes= document.getElementsByTagName("input");
for(var i in checkboxes){
checkboxes[i].checked=checked?"checked":"";
}
}
function reverse(){
var checkboxes= document.getElementsByTagName("input");
for(var i in checkboxes){
if(0==i)
continue;
checkboxes[i].checked=checkboxes[i].checked?"":"checked";
}
}
</script>
<input type="checkbox" onclick="selectAll(this)" > 全选<br>
<input type="checkbox" > tokyo hot<br>
<input type="checkbox" > dota <br>
<input type="checkbox" > lol <br>
<input type="checkbox" > wow <br>
<input type="checkbox" > warcraft <br>
<input type="checkbox" > diablo <br>
<a href="#nowhere" onclick="reverse()">反选</a>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-07-27
利用事件 实现 checkbox 反选、全选功能
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2024-07-27
通过 keyup 事件检验输入内容是否重复
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2024-07-27
通过 this 关键字 结合 mouse 事件实现下拉菜单功能
2024-03-14
三个问题的答案
2022-07-17
想知道表单提交成功后是怎么实现用户信息显示的，正确提交完后会跳转到空白页面欸？
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 63 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
