事件的作用
我们刚才的案例中的script标签在不修改代码的基础上，就必须放在body标签之后 ; 原因是因为必须在页面加载完成之后，我们才可以获取到图片标签 ; 若想把script标签放在body标签之前，这里可以通过添加页面加载成功事件来处理。事件是可以被 javaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 javaScript 函数的事件。例如 : 页面加载成功的之后我们来触发某个函数，又如我们可以在用户点击某个标签时产生一个单击事件来触发某个函数。
注意：事件通常要与函数配合使用，当事件发生时函数才会执行
事件的注册方式
使用命名函数
这种方式事件的注册写在标签体内
<input type="button" id="b1" value="点我" onclick="output()"/>
<script type="text/javaScript">
function output() {
alert("我是按钮1，被点击了");
}
</script>
使用匿名函数
<input type="button" id="b2" value="再点我" />
<script type="text/javaScript">
//匿名函数的写法
document.getElementById("b2").onclick = function () {
alert("我是按钮2，也被点击了");
}
</script>
常见的事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标点击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onkeydown | 某个键盘的键被按下 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onsubmit | 提交按钮被点击 |
案例需求：
通过一个案例演示上面常用的事件
案例效果：
案例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的案例演示</title>
<script type="text/javaScript">
//单击事件
function testClick() {
alert("哎呀被点了..");
}
//双击事件
function changeImage(imgObj) {
imgObj.src = "img/2.jpg";
}
//获取焦点
function clearText(inputObj) {
inputObj.value = "";
}
//失去焦点
function setData(inputObj) {
inputObj.value = "请输入用户名...";
}
//下拉框内容发生变化的时候会触发
function changeTest(selectObj) {
alert("当前改变后内容是：" + selectObj.value);
}
//表单提交的时候触发的方法
function submitTest() {
//如果表单提交的时候触发的方法返回的是false，那么该表单不允许提交，返回true才允许提交。
alert("表单马上要提交了..");
}
//加载事件
function ready() {
alert("页面的元素已经被加载完毕了..");
}
</script>
</head>
<body>
<input type="button" value="点我啊" onclick="testClick()"/><br/><br/>
<!‐‐ this代表了当前的标签对象 ‐‐>
<img src="img/1.jpg" width="350px" ondblclick="changeImage(this)"/><br/><br/>
<input type="text" value="请输入用户名..." onfocus="clearText(this)" onblur="setData(this)"/>
<hr/>
省份：
<select onchange="changeTest(this)">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gd">广东</option>
<option value="hn">湖南</option>
</select> <br/>
<!‐‐ 如果该表单需要根据触发函数的返回值决定是否可以提交，那么必须在触发方法之前加上return关键字‐‐>
<form action="success.html" onsubmit=" return submitTest()">
用户名：<input type="text" name="userName"/>
<input type="submit" value="提交"/>
</form>
<br/>
</body>
</html>