1、什么是事件？干什么用？
事件三要素：
- 事件源:触发(被)事件的元素
- 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
- 事件处理程序:事件触发后要执行的代码(函数形式)
2、几种常用的事件：
鼠标的相关事件
onclick就是元素的点击事件。
onmouseover:鼠标移入到元素上面时的事件
onmouseout：鼠标移除元素上面时的事件。
文本框有的事件：
onfocus：文本框获取到焦点的事件
onblur：文本框失去焦点时的事件。
表单：
onsubmit:表单提交事件。
下拉列表框，文本框
onchange：内容改变时的事件。
页面加载事件
onload：页面的元素加载完后的事件。
注意：
- 所有的事件都是以on开头
- 所有的事件的值都是一个函数。
使用事件有两种写法。
第一种写法：
使用dom元素调用事件
Dom元素.onclick=function(){ ...; }
第二种写法：
在HTML表单里面增加事件属性
HTML：
< input type=“button” οnclick=“test()”/>
Function test(){ ....; }
事件使用案例1：
通过按钮点击事件实现图片的切换：
<script type="text/javascript"> function test(){ //document.getElementById("img1").src="img/bulb_on.png"; //1.获取到img标签的src值，判断该值是off还是on var domObj=document.getElementById("img1"); if(domObj.src.indexOf("bulb_off.png")>=0){ domObj.src="img/bulb_on.png"; }else{ domObj.src="img/bulb_off.png"; } } </script> </head> <body> <img src="img/bulb_off.png" id="img1"/><br/> <input type="button" value="开\关" onclick="test()"/> </body> </html>
案例2：
修改超链接的连接地址
<script type="text/javascript"> function test(){ //1.获取到a标签 var domObj=document.getElementById("a1"); //2.修改a标签的标签内容。innerHTML：标签内容 value domObj.innerHTML="淘宝"; //3.修改标签的href属性 domObj.href="http://www.taobao.com"; } </script> </head> <body> <a id="a1" href="http://www.baidu.com">百度</a><br/> <input type="button" value="更改" onclick="test()"/> </body> </html>
Value属性和innerHTML属性的区别：
Value是一般用在文本框中。因为文本框标签有value属性。
innerHTML是div，p，h1，a这样的标签中，这些标签没有value，是通过标签内容展示数据的。
获取元素的两种方式：
第一种获取元素的方式：
Document.getElementById(“id值”)
第二种获取元素的方式：
Document.getElementsByName(“name值”);
两者的区别：
- 参数不一样。一个是id，另一个是name
- 返回值类型不一样。一个是一个元素，另一个是一个元素数组。
案例3，
修改div的class属性
<style type="text/css"> .test{ border:1px solid red; width:100px; height:100px; } .test2{ background-color:blue; } </style> <script type="text/javascript"> function test(){ //className就是html标签的class属性，因为class是关键字，所以在js中用className替换class document.getElementById("div1").className="test test2"; } </script> </head> <body> <div id="div1" class="test" onmouseover="test()"></div> </body> </html>
Js操作元素的class属性时要使用className
This的使用
this表示当前元素，this写在了哪个标签里面，哪个标签就是this元素。
表单验证
在我们点击form表单的提交按钮后，让js代码对用户输入的信息做简单的验证工作（比如用户名和密码不能为空），
验证通过了，就让表单提交，验证不通过就给出错误提醒。
onsubmit是表单验证的一个重要事件。
提交按钮的onclick事件是拦截不住表单的提交的。只有form的onsubmit事件才有机会拦截表单的提交。
案例4，
<script type="text/javascript"> function checkName() { var name = document.getElementById("name").value; if (name =="") { document.getElementById("namemsg").innerHTML="用户名不能为空!"; return false; } return true; } function checkPwd() { var pwd = document.getElementById("pwd").value; if (pwd =="") { document.getElementById("pwdmsg").innerHTML="密码不能为空！"; return false; } return true; } function sub() { if (checkName()&checkPwd()) { return true; } return false; } </script> </head> <body> <form action="${pageContext.request.contextPath }/user/login" onsubmit="return sub()"> username:<input type="text" name="username" id="name" onblur="checkName()" ><span style="color: red;" id="namemsg"></span><br/> password:<input type="password" name="password" id="pwd" onblur="checkPwd()"><span style="color: red;" id="pwdmsg"></span><br/> <input type="submit"> </form>
在该示例中，
表单验证的步骤：
给文本框后面添加一个空的标签span。提示错误信息。
给每个文本框添加onblur事件。当用户输入完后，光标离开时给出错误提醒。
在每个onblur事件对应的函数里面要return true和false。作用是确定表单是否提交
我们要在form里面添加onsubmit事件。Onsubmit=”return checkForm()”
我们需要在checkForm调用每一个onblur事件对应的函数。
案例5、省市级联下拉框
使用js实现省市级的二级联动操作
<script type="text/javascript"> window.onload = function() { var provinces = [ "请选择省份", "河南", "湖北", "山东", "山西" ]; var htm = ""; for (var i = 0; i < provinces.length; i++) { htm += "<option"+" value="+i+">" + provinces[i] + "</option>"; } document.getElementById("pro").innerHTML = htm; } function test() { var pro = document.getElementById("pro").value; var citys = [ [ "请选择城市" ], [ "郑州", "安阳", "洛阳" ], [ "武汉", "襄阳", "荆州" ] ]; var cs = citys[pro]; var html = ""; for (var i = 0; i < cs.length; i++) { html += "<option>" + cs[i] + "</option>"; } document.getElementById("city").innerHTML = html; } </script> </head> <body> <select onchange="test()" id="pro"> <option value="0">--请选择省份--</option> </select> <select id="city"> <option>--请选择城市--</option> </select> </body> </html>
