how2j.cn


工具版本兼容问题
DOM的事件有很多,下表把工作中常用的事件列出来,并进行讲解

关键字 简介 示例代码
onfocus
onblur
焦点事件
示例代码
onmousedown
onmouseup
onmousemove
onmouseout
鼠标事件
示例代码
onkeydown
onkeypress
onkeyup
键盘事件
示例代码
onclick
ondbclick
点击事件
示例代码
onchange
变化事件
示例代码
onsubmit
提交事件
示例代码
onload
加载事件
示例代码
this
当前组件
示例代码
return false
阻止事件的发生
示例代码
练习-下拉菜单
示例代码
答案-下拉菜单
示例代码
练习-验证账号是否已经存在
示例代码
答案-验证账号是否已经存在
示例代码
练习-选中所有的checkbox
示例代码
答案-选中所有的checkbox
示例代码
示例 1 : 焦点事件   
示例 2 : 鼠标事件   
示例 3 : 键盘事件   
示例 4 : 点击事件   
示例 5 : 变化事件   
示例 6 : 提交事件   
示例 7 : 加载事件   
示例 8 : 当前组件   
示例 9 : 阻止事件的发生   
示例 10 : 练习-下拉菜单   
示例 11 : 答案-下拉菜单   
示例 12 : 练习-验证账号是否已经存在   
示例 13 : 答案-验证账号是否已经存在   
示例 14 : 练习-选中所有的checkbox   
示例 15 : 答案-选中所有的checkbox   

示例 1 :

焦点事件

焦点相关的事件,分别有获取焦点和失去焦点
当组件获取焦点的时候,会触发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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 2 :

鼠标事件

鼠标事件,由鼠标按下,鼠标弹起,鼠标经过,鼠标进入,鼠标退出几个事件组成
当在组件上鼠标按下的时候,会触发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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 3 :

键盘事件

键盘事件,由键盘按下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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 4 :

点击事件

点击事件,由单击,双击按两个事件组成
当在组件上单击的时候,会触发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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 5 :

变化事件

当组件的值发生变化的时候,会触发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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 6 :

提交事件

可以在form元素上,监听提交事件
当form元素@提交的时候,会触发onsubmit事件
本例使用 提交账号密码 来进行演示
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 7 :

加载事件

当整个文档加载成功,或者一个图片加载成功,会触发加载事件
当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="http://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="http://how2j.cn/example.gif"/>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 8 :

当前组件

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. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 9 :

阻止事件的发生

比如在提交一个表单的时候,如果用户名为空,弹出提示,并阻止原本的提交
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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 10 :

练习-下拉菜单

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
改进练习-下拉菜单风格,使得当鼠标移动到不同菜单的时候,显示不同的下拉菜单
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 11 :

答案-下拉菜单

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
答案-下拉菜单
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 12 :

练习-验证账号是否已经存在

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
改进练习-验证账号是否已经存在,把需要点击按钮进行验证去掉,当用户输入用户名的时候,就自动进行验证
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 13 :

答案-验证账号是否已经存在

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 14 :

练习-选中所有的checkbox

Or  姿势不对,事倍功半! 点击查看做练习的正确姿势
有多个复选框
点击选中所有,所有的复选框都选中了
点击反向选择,反选复选框
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
示例 15 :

答案-选中所有的checkbox

在查看答案前,尽量先自己完成,碰到问题再来查看答案,收获会更多
运行效果
<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>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2018-03-21 看到下拉的题
gggggc



一开始想到的是将下拉的内容放在a标签下, 然后用onmuseover来将下拉内容hidden和show ,but鼓捣了半天不知道怎么获取a标签的下级内容。 However,看到老师的class="menu menuweapon" 和 var divClassName= "menu"+type; 真是令人窒息的操作........ 这样就不用放在a下面了,在这里把内容分级了,方便获取一些 厉害 厉害
function showmenu(type){
  var menuDivs = document.getElementsByClassName("menu");      //获取class"menu"的element,放入 menuDivs 中
  for(i=0;i<menuDivs.length;i++){
      var d= menuDivs[i];
      d.style.display="none";                                  //将all menu 的内容隐藏
   }
  var divClassName= "menu"+type;
 
  var div = document.getElementsByClassName(divClassName)[0];  //获取class"menu"下的"menuweapon"等对象的element,放入 div 中
 
  div.style.display="block";                                   //将 menu 中的下级内容 的内容显示
}
 

							






答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-12-25 JS的事件与jQuery事件的区别
GuoLiangDong
老师您好! 学习完JS的事件后,在这里学习时发现jQuery栏目下的事件与JS的事件语法都一样是吗? 或者有什么区别? 希望老师给个解答,谢谢您!








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-11-27 老师问一下
2017-10-17 下拉菜单中功能showmenu(type)的疑问
2017-10-17 下拉菜单项目中 showmenu(type)中的type是表示什么?如果表示参数的话,代表哪种参数呢??
2017-10-15 练习-选中所有的checkbox: 为什么把checkbox的位置变了就会出现错误啊
2017-09-28 下拉菜单
2017-08-23 练习代码
2017-08-04 JS函数的括号里什么时候用单引号、双引号、不用引号?
2017-04-05 做后一道练习题
2017-04-01  checkboxes[i].checked=checked?"checked":"";这个三元运算怎么理解?
2017-02-05 这里有个小错误
2017-01-19 编码要转吗
2016-05-03 return详解




提问之前请登陆
关于 前端基础-HTML DOM-事件 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图