目录
1、onload
2、onsubmit
3、onselect
4、onchange
5、onkeydown
6、onmousemove、onmouseleave、onmouseout
7、事件传播
8、实例练习
8.1 select移动
8.2 二级联动
8.3 实现表格的正反选及全选
8.4 搜索框实现
8.5 跑马灯及tab切换
1、onload
onload事件会在页面内容加载完成后立即被触发；当有些事情我们希望页面加载完立即执行时，就可以使用该事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
document.getElementsByTagName("p")[0].style.color='red'
}
</script>
</head>
<body>
<p>您好</p>
</body>
</html>
正常情况下，JS代码上html标签之前的话，JS是找不到相应的标签的；将JS代码放在onload事件函数中后，会在页面全部加载完成后执行，就可以找到相应的html标签进行相关操作了。
2、onsubmit
onsubmit事件是在提交表单时触发，该事件只能给form元素使用。应用场景：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。
阻止默认事件有两种方式：一种是return false、另一种是e.preventDefault()
需求：验证用户输入的用户名长度必须大于5，小于20；不符合要求就阻止表单提交。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.hint{
color: red;
font-size: 12px;
margin-left: 5px;
}
</style>
</head>
<body>
<form action="" id="form">
<p id="p">username: <input type="text" name="user"><span class="hint hide">用户名长度必须是大于5位，小于20位</span></p>
<input type="submit">
</form>
<script>
var form=document.getElementById("form");
var span=document.getElementsByClassName("hide")[0];
form.onsubmit=function (e) {
var username=document.getElementsByName('user')[0].value;
if (username.length<5 || username>20){
span.classList.remove("hide");
// return false //阻止默认事件方式一
e.preventDefault() //阻止默认事件方式二
}else {
span.classList.add("hide");
alert("合法输入")
}
}
</script>
</body>
</html>
注意：在使用第二种阻止默认事件方式时，必须给绑定的函数传一个参数，这个参数是默认的event对象。这个event对象中封装了该事件的一些相关属性。
3、onselect
用户选取文本时触发 ( 仅限于input 标签和 textarea标签)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text">
<script>
var ele=document.getElementsByTagName("input")[0];
ele.onselect=function(){
alert(123);
}
</script>
</body>
</html>
Paste_Image.png
如上图，选中input中的文本时，会弹出123.
4、onchange
该事件在表单元素的内容改变时触发( input, keygen, select, 和 textarea标签)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select>
<input type="text" value="求改变我吧">
<script>
var ele=document.getElementsByTagName("select")[0];
var input=document.getElementsByTagName("input")[0];
ele.onchange=function(){
alert(123);
};
input.onchange=function () {
alert("已经改变了")
}
</script>
</body>
</html>
5、onkeydown
Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="t1"/>
<script type="text/javascript">
var ele=document.getElementById("t1");
ele.onkeydown=function(e){
e=e||window.event;
var keynum=e.keyCode;
var keychar=String.fromCharCode(keynum); //将键盘对应按键的ASCII码转换为当前按键对应的字母
alert(keynum+'----->'+keychar);
};
</script>
</body>
</html>
6、onmousemove、onmouseleave、onmouseout
onmousemove 事件在鼠标移动到 div 元素上时触发。
onmouseleave 事件只在鼠标指针移出 div 元素时触发。
onmouseout 事件在鼠标指针移出 div 元素及离开子元素时触发。
实例练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
float: left;
padding: 30px;
text-align: center;
background-color: lightgray;
}
p {
background-color: white;
}
</style>
</head>
<body>
<h3>以下实例演示了 onmousemove, onmouseleave 和 onmouseout 的区别。</h3>
<p> onmousemove 事件在鼠标移动到 div 元素上时触发。</p>
<p> mouseleave 事件只在鼠标指针移出 div 元素时触发。 </p>
<p> onmouseout 事件在鼠标指针移出 div 元素及离开子元素（p 和 span）时触发。</p>
<div onmousemove="myMoveFunction()">
<p>onmousemove: <br> <span id="demo">鼠标移入和移出！</span></p>
</div>
<div onmouseleave="myLeaveFunction()">
<p>onmouseleave: <br> <span id="demo2">鼠标移入和移出！</span></p>
</div>
<div onmouseout="myOutFunction()">
<p>onmouseout: <br> <span id="demo3">鼠标移入和移出！</span></p>
</div>
<script>
x = 0;
y = 0;
z = 0;
function myMoveFunction() {
document.getElementById("demo").innerHTML = z+=1;
}
function myLeaveFunction() {
document.getElementById("demo2").innerHTML = x+=1;
}
function myOutFunction() {
document.getElementById("demo3").innerHTML = y+=1;
}
</script>
</body>
</html>
7、事件传播
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
};
document.getElementById("abc_2").onclick=function(event){
alert('222');
}
</script>
以上代码，div#abc_1是div#abc_2的父元素，两者分别都绑定了点击事件，当点击div#abc_2时，将会先触发alert("222")执行，再触发alert("111")执行。这就是事件传播。要想避免这种问题，就需要用事件对象event的stopPropagation()访求。
代码修改如下，给事件函数传一个event参数，再调用event.stopPropagation()方法。
<div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
<div id="abc_2" style="border:1px solid red;width:200px;height:200px;">
</div>
</div>
<script type="text/javascript">
document.getElementById("abc_1").onclick=function(){
alert('111');
};
document.getElementById("abc_2").onclick=function(event){
alert('222');
event.stopPropagation(); //阻止事件向外层div传播.
}
</script>
再次点击子元素div#abc_2就不会再触发父元素div#abc_1的事件函数执行了。
8、实例练习
8.1 select移动
将左边的框中选中的对象移动右边的框中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
margin: 0 auto;
background-color: darkgray;
width: 80%;
height: 600px;
margin-top: 30px;
word-spacing: -5px;
}
#left{
display: inline-block;
width: 100px ;
height: 140px;
background-color: wheat;
text-align: center;
}
#choice{
display: inline-block;
height: 140px;
background-color: darkolivegreen;
vertical-align: top;
padding:0 5px;
}
#choice button{
margin-top: 20px;
}
#right{
display: inline-block;
width: 100px ;
height: 140px;
background-color: wheat;
text-align: center;
line-height: 140px;
}
</style>
</head>
<body>
<div class="outer">
<select multiple="multiple" size="5" id="left">
<option>红楼梦</option>
<option>西游记</option>
<option>水浒传</option>
<option>JinPingMei</option>
<option>三国演义</option>
</select>
<span id="choice">
<button id="choose_move"> > </button><br>
<button id="all_move"> >> </button>
</span>
<select multiple="multiple" size="10" id="right">
<option>放风筝的人</option>
</select>
</div>
<script>
var choose_move=document.getElementById("choose_move");
var all_move=document.getElementById("all_move");
var right=document.getElementById("right");
var left=document.getElementById("left");
var options=left.options;
choose_move.onclick=function(){
for (var i=0; i<options.length;i++){
var option=options[i];
if(option.selected==true){
right.appendChild(option);
i--;
}
}
};
all_move.onclick=function(){
for (var i=0; i<options.length;i++){
var option=options[i];
right.appendChild(option);
i--;
}
};
</script>
</body>
</html>
8.2 二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="province">
<option>请选择省:</option>
</select>
<select id="city">
<option>请选择市:</option>
</select>
<script>
data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]};
var p=document.getElementById("province");
var c=document.getElementById("city");
for(var i in data){
var option_pro=document.createElement("option");
option_pro.innerHTML=i;
p.appendChild(option_pro);
}
p.onchange=function(){
pro=(this.options[this.selectedIndex]).innerHTML;
citys=data[pro];
c.options.length=0;
for (var j in citys){
var option_city=document.createElement("option");
option_city.innerHTML=citys[j];
c.appendChild(option_city);
}
}
</script>
</body>
</html>
8.3 实现表格的正反选及全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>全选</button>
<button>反选</button>
<button>取消</button>
<hr>
<table border="1">
<tr>
<th> </th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>alex</td>
<td>29</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>yuan</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>egon</td>
<td>30</td>
<td>男</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>seven</td>
<td>23</td>
<td>男</td>
</tr>
</table>
<script>
var ele_buttons=document.getElementsByTagName('button');
var ele_inps=document.getElementsByTagName('input');
for (var i=0;i<ele_buttons.length;i++){
ele_buttons[i].onclick=function () {
switch (this.innerHTML) {
case '全选':
for (var j=0;j<ele_inps.length;j++){
ele_inps[j].checked=true;
}break;
case '取消':
for (var j=0;j<ele_inps.length;j++){
ele_inps[j].checked=false;
}break;
case '反选':
for (var j=0;j<ele_inps.length;j++){
if (ele_inps[j].checked){
ele_inps[j].checked=false;
}
else {
ele_inps[j].checked=true;
}
}break;
}
}
}
</script>
</body>
</html>
8.4 搜索框实现
需要用到以下两个事件：
-
onblur元素失去焦点时触发 -
onfocus元素获取焦点时触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function Focus(){
var input=document.getElementById("ID1");
if (input.value=="请输入用户名"){
input.value="";
}
}
function Blurs(){
var ele=document.getElementById("ID1");
var val=ele.value;
if(!val.trim()){
ele.value="请输入用户名";
}
}
</script>
</head>
<body>
<input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">
</body>
</html>
8.5 跑马灯及tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style>
*{margin:0; padding:0; list-style:none;}
body{
font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;
}
h3{
text-align: center;
color:darkcyan;
margin-top: 30px;
letter-spacing: 5px;
}
.box{
width: 1000px;
margin:50px auto 0px;
}
#title{
line-height: 40px;
background-color: rgb(247,247,247);
font-size: 16px;
font-weight: bold;
color: rgb(102,102,102);
}
#title span{
float: left;
width: 166px;
text-align: center;
}
#title span:hover{
/*color: black;*/
cursor: pointer;
}
#content{
margin-top: 20px;
}
#content li{
width: 1050px;
display: none;
background-color: rgb(247,247,247);
}
#content li div{
width: 156px;
margin-right: 14px;
float: left;
text-align: center;
}
#content li div a{
font-size: 14px;
color: black;
line-height: 14px;
/* float: left;*/
display: inline-block;
margin-top: 10px;
}
#content li a:hover{
color: #B70606;
}
#content li div span{
font-size: 16px;
line-height: 16px;
/*float: left;*/
display: block;
color: rgb(102,102,102);
margin-top: 10px;
}
#content img{
float: left;
width: 155px;
height: 250px;
}
#title .select{
background-color: #2459a2;
color: white;
border-radius: 10%;
}
#content .show{
display: block;
}
.show span{
color: red!important;
font-size: 30px;
}
</style>
</head>
<body>
<h3 id="wel">京东商城欢迎您</h3>
<!-- direction="right up down left" -->
<!-- behavior：滚动方式(包括3个值：scroll、slide、alternate) -->
<!-- 说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。 -->
<!-- scrollamount="5" 滚动速度 -->
<marquee behavior="alternate" direction="right">欢迎您苑昊先生</marquee>
<script>
function test(){
var mywel = document.getElementById("wel");
var content = mywel.innerText;
var f_content = content.charAt(0);
var l_content = content.substring(1,content.length);
var new_content = l_content + f_content;
mywel.innerText = new_content;
}
// setInterval("test();", 500);
</script>
<div class="box">
<p id="title">
<span class="select">家用电器</span>
<span>家具</span>
<span>汽车</span>
<span>食品</span>
<span>女鞋</span>
<span>医疗保健</span>
</p>
<ul id="content">
<li class="show">
<div><a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div>
<div><a href="#">海尔洗衣机</a><span>价格:5400</span></div>
<div><a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div>
<div><a href="#">三星智能电视</a><span>价格:8999</span></div>
<div><a href="#">净水器</a><span>价格:1300</span></div>
<div><a href="#">空气净化器</a><span>价格:5300</span></div>
</li>
<li>
<div><a href="#">沙发</a><span>价格:2900</span></div>
<div><a href="#">沙发</a><span>价格:2900</span></div>
<div><a href="#">沙发</a><span>价格:2900</span></div>
<div><a href="#">沙发</a><span>价格:2900</span></div>
<div><a href="#">沙发</a><span>价格:2900</span></div>
<div><a href="#">沙发</a><span>价格:2900</span></div>
</li>
<li>
<div><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><a href="#">长安汽车</a><span>价格:12900</span></div>
<div><a href="#">长安汽车</a><span>价格:12900</span></div>
</li>
<li>
<div><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><a href="#">嘉兴粽子</a><span>价格:1</span></div>
<div><a href="#">嘉兴粽子</a><span>价格:1</span></div>
</li>
<li>
<div><a href="#">星期六</a><span>价格:439</span></div>
<div><a href="#">星期六</a><span>价格:439</span></div>
<div><a href="#">星期六</a><span>价格:439</span></div>
<div><a href="#">星期六</a><span>价格:439</span></div>
<div><a href="#">星期六</a><span>价格:439</span></div>
<div><a href="#">星期六</a><span>价格:439</span></div>
</li>
<li>
<div><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
<div><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>
</li>
</ul>
</div>
<script>
var title=document.getElementById('title');
var content=document.getElementById('content');
var category=title.getElementsByTagName('span');
var item=content.getElementsByTagName('li');
for (var i = 0; i < category.length; i++) {
category[i].index=i;
category[i].onclick=function(){
for (var j = 0; j < category.length; j++) {
category[j].className='';
item[j].className='';
}
this.className='select';
item[this.index].className='show';
}
}
</script>
</body>
</html>
网友评论