1.onload事件
：页面或图像加载完成后立即发生
<script>
function load(){
alert("页面已加载！");
}
</script>
<body onload="load()">
<h1>Hello World!</h1>
</body>
用匿名函数实现：常用
<script>
window.onload=function(){
//窗口加载完毕触发此函数
alert("页面已加载！");
}
</script>
2. onclick事件
：用户点击 HTML 元素触发
<script>
function changetext(x){
x.innerHTML="hello!";
}
</script>
<h2 onclick="changetext(this)">点击换文本!</h2>
简单嵌入写法(代码少情况)：
<h2 onclick=" this.innerHTML='hello!' ">点击换文本!</h2>
点击元素出发onclick函数
3. onblur事件
：元素失去焦点
用户名: <input type="text" id="username" onblur="upperCase()"><br>
年龄: <input type="text" id="age" onblur="alert(this.value)">
<script>
function upperCase() {
var x=document.getElementById("username");
x.value=x.value.toUpperCase();
}
</script>
示例：必填验证
<input type="text" id="username" onblur="check(this)"/>
<span id="tip" style="color:red;">*</span>
<script>
function check(x) {
var t = document.getElementById("tip");
if( x.value.length==0 ){
t.innerHTML = "必填,不能为空";
}
else {
t.innerHTML = "OK";
}
}
</script>
4. onfocus事件
：元素获得焦点
<input type="text" id="username" placeholder="请输入用户名" onfocus="setStyle(this)"
onblur="clsStyle(this)">
<br>
<input type="text" id="age" placeholder="请输入年龄" onfocus="setStyle(this)"
onblur="clsStyle(this)">
<script>
function setStyle(x) {
x.style.background = "yellow";
}
function clsStyle(x) {
x.style.background = "white";
}
</script>
5. onchange事件
：当输入域的
内容改变并失去焦点
时发生
<select name="here"
onchange="window.location=this.options[this.selectedIndex].value">
<option value= ""> 请选择 </option>
<option value= "http://www.163.com"> 网易</option>
<option value= "http://www.sina.com">新浪 </option>
<option value= "http://www.sohu.com">搜狐 </option>
</select>
点击选择时内容改变，松开鼠标失去焦点，跳转到对应的网页
6. onmouseover/onmouseout
:鼠标被移到某元素之上/鼠标从某元素移开
7. onkeyup
:在键盘按键被松开时发生
<div>输入小写自动变成大写</div>
<input id="source" type="text" onkeyup="upper()" />
<script>
function upper() {
var s = document.getElementById("source");
s.value=s.value.toUpperCase();
}
</script>
8. onsubmit
:表单提交事件
支持该事件的标签：
◼ onsubmit 事件发生在单击表单的“提交”按钮时。常使用该事
件来验证表单的有效性。在事件处理程序中返回 false 值可以
阻止表单提交。
单击提交按钮后，如果check()函数返回值
为true，则提交跳转到action。否则不提交。
<script>
function check() {
var psd1= document.getElementById("psd1");
var psd2= document.getElementById("psd2");
if( psd1.value != psd2.value ) { alert("密码不一致"); return false; }
else return true;
}
</script>
<form name=f1 onsubmit="return check()" action="/Home/Index">
输入密码<input type="password" id="psd1"><br/>
确认密码<input type="password" id="psd2">
<input type="submit" value="提交">
</form>