一、 事件
1.鼠标事件
1.1表单onsubmit事件
作用：当表单的内容不符合要求的时候，阻止表单提交，在实际应用中，会给用户提示
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> span{ display: none; color: red; font-size: 12px; } </style> </head> <body> <form id="form"> 用户名：<input id="user" type="text" placeholder="请输入用户名" /> <span id="userInfo">*用户名格式不正确</span> <br /> 密码：<input id="pwd" type="password" placeholder="请输入密码" /> <span id="pwdInfo">*请包含数字和字母</span> <br /> <input type="submit" value="提交" /> </form> <script type="text/javascript"> //获取标签对象 var form = document.getElementById("form"); var userInput = document.getElementById("user"); var pwdInput = document.getElementById("pwd"); var userSpan = document.getElementById("userInfo"); var pwdSpan = document.getElementById("pwdInfo"); //给表单添加阻止事件 //注意：obsubmit的事件的函数返回为false，则表示表单阻止被提交 form.onsubmit = function(){ if(userInput.value.length < 3 || userInput.value.length > 10){ //显示错误提示 userSpan.style.display = "inline-block"; return false; }else{ if(pwdInput.value.length != 6 || (typeof pwdInput.value == Number)){ pwdSpan.style.display = "inline-block"; return false; }else{ alert("提交成功"); } } } </script> </body> </html>
2.键盘事件
keydown:按下键盘的任意键
keyup：抬起键盘的任意键
keypress:按下键盘的非功能键【功能键：ctrl/shift/alt/capslock/numlock键】
注意：
1.上面三个事件会被连续调用
2.键盘事件一般绑定给document
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> document.onkeydown = function(eve){ var e = eve || window.event; //console.log(e); console.log(e.altKey,e.ctrlKey,e.shiftKey,e.keyCode); } document.onkeyup = function(eve){ var e = eve || window.event; //console.log(e); console.log(e.altKey,e.ctrlKey,e.shiftKey,e.keyCode); } document.onkeypress = function(eve){ var e = eve || window.event; //console.log(e); console.log(e.altKey,e.ctrlKey,e.shiftKey,e.keyCode); } </script> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 100px; height: 100px; background-color: red; position: absolute; } </style> </head> <body> <div id="box"> </div> <script type="text/javascript" src="js/randomcolor.js"></script> <script type="text/javascript"> //需求1：在页面桑有一个div，当按下shift + c键的时候给div随机修改颜色 //需求2：按下上下左右键的时候控制div的移动 //获取对象 var jsDiv = document.getElementById("box"); //1 /*document.onkeydown = function(eve){ var e = eve || window.event; if(e.shiftKey == true && e.keyCode == 67){ jsDiv.style.backgroundColor = randomColor(); } }*/ //2. //参数：事件名称，事件触发之后需要执行的函数 document.addEventListener("keydown",func,false); //document.onkeydown = function function func(eve){ var e = eve || window.event; switch(e.keyCode){ //左键 //offsetLeft/offsetRight/,相对于父标签的距离 case 37:{ jsDiv.style.left = jsDiv.offsetLeft - 5 + "px"; break; } case 38:{ jsDiv.style.top = jsDiv.offsetTop - 5 + "px"; break; } case 39:{ jsDiv.style.left = jsDiv.offsetLeft + 5 + "px"; break; } case 40:{ jsDiv.style.top = jsDiv.offsetTop + 5 + "px"; break; } default:{ } } } </script> </body> </html>
3.事件的传递
事件流：描述的是从页面接收一个事件开始，当几个元素重叠在的一起的时候，当点击其中的一个元素，其他元素触发事件的顺序
两种模式：
事件冒泡：从里向外逐个触发
事件捕获：从外向里逐个触发
注意：现代的浏览器默认情况下使用的都是冒泡
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1{width: 200px;height: 200px; background-color: red;} #div2{width: 100px;height: 100px; background-color: cyan;} #div3{width: 50px;height: 50px; background-color: blue;} </style> </head> <body> <div id="div1"> <div id="div2"> <div id="div3"> </div> </div> </div> <script type="text/javascript"> var jsDiv1 = document.getElementById("div1"); var jsDiv2 = document.getElementById("div2"); var jsDiv3 = document.getElementById("div3"); //给三个div的对象分别添加监听事件 /* * false:从里向外，div3 --->div2--->div1 冒泡 * true:从外向里，div1 --->div2--->div3 捕获 */ jsDiv1.addEventListener("click",func,true); jsDiv2.addEventListener("click",func,true); jsDiv3.addEventListener("click",func,true); function func(){ // document.write(this); // document.write("<br />"); console.log(this); } </script> </body> </html>
4.事件的监听
事件监听器
addEventListener():需要给某个对象监听指定的事件，当事件触发的时候，需要执行指定的操作【函数】
举例：
对象.addEventListener(“事件名称”，函数名，false)
div.addEventListener(“click”，func，false)
div.addEventListener(“click”，function(){
//函数体
}，false)
注意：可以给同一个标签对象同时监听多个事件
对象.addEventListener(“事件名称1”，函数名1，false)
对象.addEventListener(“事件名称2”，函数名2，false)
删除绑定的函数
对象.removeEventListener(“事件名称”,函数名)
二、综合案例
1.卧龙首页+图片轮播
卧龙css
*{ padding: 0px; margin: 0px; } /*头部*/ /*1.整体设置*/ #head{ width: 100%; height: 50px; /*background-color: cyan;*/ } /*2.设置logo图*/ #head > img{ margin: 15px 10px; } /*3.设置搜索框和搜索按钮*/ #search{ float: right; margin: 12px 10px; /*background-color: red;*/ } #search input{ height: 26px; float: left; } #search button{ border: 0px; float: left; } /*导航*/ /*1.整体设置*/ #nav{ width: 100%; height: 50px; background-color: black; } /*2.整体设置小的div*/ #nav div{ float: left; color: white; height: 100%; } /*3.设置文字*/ .info{ width: 19.8%; /*内容居中*/ text-align: center; line-height: 50px; font-size: 14px; } /*4.设置线条*/ .line{ width: 1px; background-color: white; } /*第四部分*/ #forth{ width: 100%; height: 150px; margin: 10px; } /*将第四部分内容横向显示*/ #forth > div{ float: left; margin-left: 10px; height: 100%; } /*设置文字大小*/ #forth li,#forth p{ font-size: 12px; color: gray; /*margin: ;*/ } /*单独设置*/ #forth ul{ list-style: none; } #news{ width: 40%; } #detail,#invite{ width: 25%; } /*设置卧龙市场*/ #market{ width: 100%; } #market ul{ margin-top:10px ; } #market li{ /*将竖向排列的li转换为横向排列*/ display: inline-block; margin-left: 10px; width:22%; } #market p{ font-size: 12px; color: gray; }轮播图css
/*轮播图*/ /*1.整体设置*/ #image{ width: 100%; height: 400px; margin: 10px auto; position: relative; } /*2.设置图片*/ #image > img{ width: 100%; height: 100%; } /*3.设置ul*/ #list{ list-style: none; position: absolute; bottom: 10px; left: 40%; } /*4.设置li*/ #list li{ float: left; width: 20px; height: 20px; background-color: lightgray; border-radius: 50%; margin-left: 10px; text-align: center; line-height: 20px; } /*5.设置左右按钮*/ .btn{ width: 50px; height: 80px; background-color: rgba(0,0,0,0.2); color: white; text-align: center; line-height: 80px; position: absolute; top:160px; display: none; } #left{ left:0px; } #right{ right: 0px; }轮播图js
//获取所有的标签对象 var jsBox = document.getElementById("image"); var jsPic = document.getElementById("pic"); var jsLeft = document.getElementById("left"); var jsRight = document.getElementById("right"); var jsLisArr = jsBox.getElementsByTagName("li"); //将第一个小圆点设置为红色 jsLisArr[0].style.backgroundColor = "red"; //定义一个变量，用于记录当前图片的页数 var currentPage = 1; //启动一个间歇性定时器，去更换img标签上的资源 var timer = setInterval(startLoop,2000); function startLoop(){ //每隔两秒，递增，切换不同的图片 currentPage++; changePage(); } function changePage(){ //但是，需要做临界判断 if(currentPage == 9){ currentPage = 1; } if(currentPage == 0){ currentPage = 8; } //重新设置图片 jsPic.src = "img/" + currentPage + ".jpg"; //先清除之前的设置 for(var i = 0;i < jsLisArr.length;i++){ jsLisArr[i].style.backgroundColor = "lightgray"; } //设置小圆点的选中状态 jsLisArr[currentPage - 1].style.backgroundColor = "red"; } //鼠标进入div【监听事件】 jsBox.addEventListener("mouseover",overFunc,false); function overFunc(){ //停止定时器 clearInterval(timer); //显示左右按钮 jsLeft.style.display = "block"; //inline-block jsRight.style.display = "block"; } //鼠标移出div【监听事件】 jsBox.addEventListener("mouseout",outFunc,false); function outFunc(){ //重启定时器 timer = setInterval(startLoop,2000); //隐藏左右按钮 jsLeft.style.display = "none"; jsRight.style.display = "none"; } //鼠标进入左右按钮 //注意：进入左按钮，颜色加深，右按钮不受影响 jsLeft.addEventListener("mouseover",deepFunc,false); jsRight.addEventListener("mouseover",deepFunc,false); function deepFunc(){ this.style.backgroundColor = "rgba(0,0,0,0.6)"; } //鼠标离开左右按钮 jsLeft.addEventListener("mouseout",nodeepFunc,false); jsRight.addEventListener("mouseout",nodeepFunc,false); function nodeepFunc(){ this.style.backgroundColor = "rgba(0,0,0,0.2)"; } //鼠标点击左右按钮 jsLeft.addEventListener("click",function(){ currentPage--; changePage(); },false); jsRight.addEventListener("click",function(){ currentPage++; changePage(); },false); //当鼠标进入小圆点 for(var i = 0;i < jsLisArr.length;i++){ //给每个li标签做标记,用于记录第几张图片 jsLisArr[i].index = i + 1; //给每个li添加悬浮事件 jsLisArr[i].addEventListener("mouseover",function(){ currentPage = parseInt(this.index); changePage(); },false); }卧龙首页html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--连接css--> <link rel="stylesheet" type="text/css" href="css/wlstyle.css" /> <link rel="stylesheet" type="text/css" href="css/imagestyle.css" /> </head> <body> <!--整体--> <div id="box"> <!--头部--> <div id="head"> <!--logo图--> <img src="img/WLImages/logo_01.jpg" /> <div id="search"> <form action="#" method="get"> <input type="text" placeholder="请输入内容" /> <button><img src="img/WLImages/button.jpg" /></button> </form> </div> </div> <!--导航--> <div id="nav"> <div class="info"><a>集团介绍</a></div> <div class="line"></div> <div class="info"><a>集团介绍</a></div> <div class="line"></div> <div class="info"><a>集团介绍</a></div> <div class="line"></div> <div class="info"><a>集团介绍</a></div> <div class="line"></div> <div class="info"><a>集团介绍</a></div> </div> <!--轮播图--> <div id="image"> <!--初始图片--> <img src="img/1.jpg" id="pic"/> <!--显示数字--> <ul id="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <!--左右按钮--> <div id="left" class="btn"><</div> <div id="right" class="btn">></div> </div> <!--新闻资讯，人才招聘。。--> <div id="forth"> <!--新闻资讯--> <div id="news"> <h3>新闻资讯</h3> <ul> <li>可以给同一个标签对象同时监听多个事件 2018-10-10</li> <li>可以给同一个标签对象同时监听多个事件 2018-10-10</li> <li>可以给同一个标签对象同时监听多个事件 2018-10-10</li> <li>可以给同一个标签对象同时监听多个事件 2018-10-10</li> <li>可以给同一个标签对象同时监听多个事件 2018-10-10</li> </ul> </div> <!--卧龙介绍--> <div id="detail"> <h3>卧龙介绍</h3> <p> 可以给同一个标签对象同时监听多个事件 </p> <p> 可以给同一个标签对象同时监听多个事件 </p> </div> <!--人才招聘--> <div id="invite"> <h3>人才招聘</h3> <p> 可以给同一个标签对象同时监听多个事件 </p> <img src="img/WLImages/flower.jpg" /> </div> </div> <!--卧龙市场--> <div id="market"> <h3>卧龙市场</h3> <ul> <li> <img src="img/WLImages/img02.jpg" /> <p>可以给同一个标签对象同时监听多个事件</p> </li> <li> <img src="img/WLImages/img02.jpg" /> <p>可以给同一个标签对象同时监听多个事件</p> </li> <li> <img src="img/WLImages/img02.jpg" /> <p>可以给同一个标签对象同时监听多个事件</p> </li> <li> <img src="img/WLImages/img02.jpg" /> <p>可以给同一个标签对象同时监听多个事件</p> </li> </ul> </div> <!--底部--> <div id="footer"> <a>联系我们</a> <a>联系我们</a> <a>联系我们</a> </div> </div> <script type="text/javascript" src="js/loop.js"></script> </body> </html>
2.省份城市二级关联
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="init();"> <select id="province" onchange="getCity();"> <option value= 0 >北京</option> <option value= 1 >上海</option> <option value= 2 >天津</option> <option value= 3 >重庆</option> <option value= 4 >河北</option> <option value= 5 >山西</option> <option value= 6 >内蒙古</option> <option value= 7 >辽宁</option> <option value= 8 >吉林</option> <option value= 9 >黑龙江</option> <option value= 10 >江苏</option> <option value= 11 >浙江</option> <option value= 12 >安徽</option> <option value= 13 >福建</option> <option value= 14 >江西</option> <option value= 15 >山东</option> <option value= 16 >河南</option> <option value= 17 >湖北</option> <option value= 18 >湖南</option> <option value= 19 >广东</option> <option value= 20 >广西</option> <option value= 21 >海南</option> <option value= 22 >四川</option> <option value= 23 >贵州</option> <option value= 24 >云南</option> <option value= 25 >西藏</option> <option value= 26 >陕西</option> <option value= 27 >甘肃</option> <option value= 28 >宁夏</option> <option value= 29 >青海</option> <option value= 30 >新疆</option> <option value= 31 >香港</option> <option value= 32 >澳门</option> <option value= 33 >台湾</option> </select> <!--注意：select有一个事件：onchange，表示当option发生改变的时候会自动触发--> <select id="city"> </select> <script type="text/javascript"> var arr = new Array(); arr[0 ]="东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆"; arr[1 ]="黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明"; arr[2 ]="和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县"; arr[3 ]="万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川"; arr[4 ]="石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水"; arr[5 ]="太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城"; arr[6 ]="呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟"; arr[7 ]="沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛"; arr[8 ]="长春,吉林,四平,辽源,通化,白山,松原,白城,延边"; arr[9 ]="哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭"; arr[10 ]="南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安"; arr[11 ]="杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水"; arr[12 ]="合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州"; arr[13 ]="福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德"; arr[14 ]="南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶"; arr[15 ]="济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽"; arr[16 ]="郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源"; arr[17 ]="武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州"; arr[18 ]="长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界" arr[19 ]="广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮"; arr[20 ]="南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池"; arr[21 ]="海口,三亚"; arr[22 ]="成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州"; arr[23 ]="贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南"; arr[24 ]="昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧"; arr[25 ]="拉萨,日喀则,山南,林芝,昌都,阿里,那曲"; arr[26 ]="西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛"; arr[27 ]="兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南" arr[28 ]="银川,石嘴山,吴忠,固原"; arr[29 ]="西宁,海东,海南,海北,黄南,玉树,果洛,海西"; arr[30 ]="乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏"; arr[31 ]="香港"; arr[32 ]="澳门"; arr[33 ]="台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖"; //初始化 function init(){ //获取city的对象 var citySelect = document.getElementById("city"); //获取北京下面所有的区域 var areaArr = arr[0].split(","); //遍历数组 for(var i = 0;i < areaArr.length;i++){ /* * 方式一 * var text = createTextNode(areaArr[i]); * var op = createElement("option"); * op.appendChild(text); * citySelect.appendChild(op); */ //方式二 //new Option(str1,str2),一般用于动态生成选项 //<option value= "str2" >str1</option> citySelect[i] = new Option(areaArr[i],areaArr[i]); //思想：将select标签当做一个数组处理，其中的option对象就相当于是其中的元素 } } //当切换省份的时候，需要切换对应的城市 function getCity(){ //获取省份和城市的select的对象 var pro = document.getElementById("province"); var city = document.getElementById("city"); //思路：将被选中的select和数组的下标产生联系 //获取当前选中的省份的标记 var index = pro.selectedIndex; //通过选中的省份去数组中获取对应的城市 var cityArr = arr[index].split(","); //重置：将city的select置为空，重新赋值 city.length = 0; for(var i = 0;i < cityArr.length;i++){ city[i] = new Option(cityArr[i],cityArr[i]); } } </script> </body> </html>
1251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
