JavaScript事件

1、事件

绑定事件触发函数

JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。‘

网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。

2、事件举例

鼠标点击
页面或图像载入 (找对象,加载完成后再操作(属性,样式,事件绑定)) = 就绪函数
鼠标悬浮于页面的某个热点之上
在表单中选取输入框(获取焦点)
确认表单(提交事件)
键盘按键 (组合键)

注意：事件通常与函数配合使用，当事件发生时函数才会执行

3、就绪函数

确保页面内容完全加载完成后,再执行JS函数.(JS函数内的一些元素的获取及操作,避免找不到对象未定义等异常的发生!)

JS原生:

纯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>