1、事件
绑定事件触发函数
JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。‘
网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。
2、事件举例
- 鼠标点击
- 页面或图像载入 (找对象,加载完成后再操作(属性,样式,事件绑定)) = 就绪函数
- 鼠标悬浮于页面的某个热点之上
- 在表单中选取输入框(获取焦点)
- 确认表单(提交事件)
- 键盘按键 (组合键)
注意：事件通常与函数配合使用，当事件发生时函数才会执行
3、就绪函数
确保页面内容完全加载完成后,再执行JS函数.(JS函数内的一些元素的获取及操作,避免找不到对象未定义等异常的发生!)
JS原生:
<body onload="ready()"></body>
纯JS:
window.onload = function(){}
其他常用事件：
onFocus、onBlur、onChange、onSubmit、onMouseOver 和 onMouseOut
<!DOCTYPE> <html> <head> <title>Demo 07 就绪函数</title> <meta charset="utf-8"/> <!--外部脚本--> <script type="text/javascript"> //就绪函数 function ready(){ //加载完成后的事件绑定 alert("I am ready!"); } /* window.onload=function(){ } */ </script> </head> <body onload="ready()"> </body> </html>
4、JavaScript元素访问
1）name节点访问HTML元素
document.MyForm1.email.value = "20010411@qq.com";
2）通过id获取元素（注意：相同id只获取第一个）
document.getElementById("MyForm1_id"));
3）通过name属性获取元素“集合”
alert(document.getElementsByName("userName").length);
alert(document.getElementsByName("userName")[0]);
4）通过Tag Name获取元素“集合”
alert(document.getElementsByTagName("input").length);
alert(document.getElementsByTagName("input")[0].name);
5）jQuery语法配合css选择器找对象
$('select')
注意：
1.元素集合的访问方法法
2. getElementsByName与getElementsByTagName的区别
1 <!DOCTYPE> 2 3 <html> 4 <head> 5 <title>Demo 08 获取元素 并且 控制元素</title> 6 <meta charset="utf-8"/> 7 <!--外部脚本--> 8 <script type="text/javascript"> 9 //重点：了解就绪函数 10 function ready(){ 11 //加载完成后的事件绑定 12 //alert("I am ready!"); 13 //1.name打点访问HTML元素 14 //alert(document.MyForm1.email); 15 //alert(document.MyForm1.email.value); 16 //document.MyForm1.email.value = "20010411@qq.com"; 17 //document.MyForm1.email.style.color = "#99ff33"; 18 //alert(document.MyForm1.myButton); 19 //document.MyForm1.myButton.onclick = function(){ 20 // alert("绑定事件成功！！"); 21 //} 22 //2.通过id获取元素 23 //alert(document.getElementById("MyForm1_id")); 24 /* 25 var userNameInput = document.getElementById("MyForm1_id"); 26 if(userNameInput!=null){ 27 document.getElementById("MyForm1_id").value= "admin"; 28 //ajax 29 } 30 */ 31 32 //3.通过Name属性获取元素“集合” 33 //alert(document.getElementsByName("userName").length); 34 //alert(document.getElementsByName("userName")[0]); 35 36 //4.通过Tag Name获取元素“集合” 37 //alert(document.getElementsByTagName("input").length); 38 //alert(document.getElementsByTagName("input")[0].name); 39 40 //alert(document.getElementById("MyForm1_id").value); 41 42 //5.Jqeury语法配合CSS选择器找对象 43 //$('select'). 44 } 45 46 function validate(thisform){ 47 //alert("validate"); 48 49 return true; 50 } 51 52 </script> 53 54 </head> 55 56 <body onload="ready()"> 57 <form name="MyForm1" action="" onsubmit="return validate(this)" method="post"> 58 User Name: <input name="userName" id="MyForm1_id" value="Submit1"/><div id="message"/> 59 <!-- User Name: <input name="userName" id="MyForm1_id" value="Submit2"/><div id="message"/>--> 60 <br/> 61 Email: <input name="email" size="30" value="test@qq.com"/> 62 <br/> 63 <input type="submit" value="Submit"/> 64 <br/> 65 <input name="myButton" type="button" value="自定义按钮"/> 66 </form> 67 68 </body> 69 70 </html>