您的位置：首页 > Web前端 > JavaScript

JavaScript常用事件总结

2012-05-04 11:58 477 查看
常用的JavaScript事件例子，自己理解，如果有不对或不足希望大家指出来！


onmouseover、onmouseout、onchange、onfocus、onblur、onsubmit、onclick、onload和onunload

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>javascript常用验证</title>
<style>

</style>

<script type="text/javascript">
function mouseOver(){
alert("当鼠标移入时触发事件...");
}
function mouseOut(){
alert("当鼠标移出时出发事件...");
}
function checkEmail(str){
if (str.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
return alert("you are right!!");
else
alert("oh,no!!!");
}
function
alert("哈哈，我是onload事件，在页面加载时会执行我的....")
}
function onUnloadEvent(){
alert("哈哈，我是unonload事件，在页面离开的时候会执行的....");
}
function onClickEvent(){
alert("我是鼠标点击事件哈哈...");
}
function a(){
document.getElementById("trId").style.cssText="background-Color:#00F";
}
function b(){
document.getElementById("trId").style.cssText="background-Color:#fff";
}
function c(){
document.getElementById("inputId").focus();
document.getElementById("inputId").select();
}
function setFocusStyle(){
document.getElementById("lname").style.background="yellow";
}
function setFocusStyle1(){
document.getElementById("fname").style.background="yellow";
}
function setOnblurStyle(){
document.getElementById("lname").style.background="red";
}
function setOnblurStyle1(){
document.getElementById("fname").style.background="red";
}
</script>
</head>

<body onload="onloadEvent()">
<a href="http://www.w3school.com.cn" onmouseover="mouseOver()">你点我啊,当鼠标被移动到某个元素自上时触发的事件</a><br><br>
<a href="http://www.w3school.com.cn" onmouseout="mouseOut()">你点我啊,当鼠标从某个元素上面一开时触发的事件</a><br><br>
<a href="http://www.w3school.com.cn" onmouseout="mouseOver()">你点我啊</a><br><br>
onchange事件(当用户改变某个域的内容时触发的事件)：<br>
<input type="text" id="email" size="30" onchange="checkEmail(this.value)" value=""/><br><br>
<form>
<table border="1" bgcolor="" width="30%" class="">
<tr><td align="center">a1</td></tr>
<tr><td align="right">a2</td></tr>
<tr><td align="right">a3</td></tr>
<tr><td align="left">a4</td></tr>
<tr><input type="button" id="buttonId" value="OK5" onClick="onClickEvent()"/></tr>
</table>
</form>

<table class="table2"  cellpadding="0" border="1" bordercolor="#0033FF"  >
<tr align="center" onmouseover="this.style.backgroundColor='#00F';" onmouseout="this.style.backgroundColor='#fff';">
<th class="th1" align="center">登记</th>
<th class="th1" align="center">通过鼠标移入移出事件来改变行的颜色</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#00F';" onmouseout="this.style.backgroundColor='#fff';">
<th>A0000001</th>
<td>鼠标移入我变色</td>
</tr>
<tr id="trId" onmouseover="a()" onmouseout="b()">
<th>A0000002</th>
<td>鼠标移出我又变色</td>
</tr>
</table>
<br>
自身获得焦点，但获得焦点的标志是该文本框内出现输入光标<br>
如果要让里面的内容全部被选中，还必须使用this.select();<br>
<input type="text" name="url" value="http://www.gxblk.com" size="30" onmousemove="this.focus();this.select();"><br>
<input id="inputId" type="text" name="url" value="http://www.gxblk.com" size="30" onmousemove="this.focus();this.select();"><br>
onfocus事件举例(当点击输入框的时候获得焦点会触发获得焦点事件，当点击到别处时会失去焦点会触发失去焦点事件)：<br>
First Name:<input id="fname" type="text" onfocus="setFocusStyle1()" onblur="setOnblurStyle1()"><br>
Last Name:<input id="lname" type="text" onfocus="setFocusStyle()" onblur="setOnblurStyle()"/><br>

onsubmit与onclick的区别：onsubmit是表单提交时触发，onclick是按钮点击时触发(onclick对button有效)：<br>
一个是提交表单操作，把东西传给服务器，一个是鼠标的单击操作；<br>
当然，onclick可以通过js来触发onsubmit事件，如通过onclick触发一个函数，在函数里面调用document.form.submit();就可以触发表单提交事件呵..<br>
onsubmit事件用法：<input type="submit" value="submit" />
<form name="form" action="#" method="post" onsubmit="check();">
<p><label>称呼:      </label><input type="text" name="name" id="name" /></p>
<p><label>发表留言:</label><textarea name="contents" id="contents" cols="15" rows="5"></textarea><</p>
<p class="noborder"><input type="submit" value="submit" /><input type="reset" value="reset"/><p>
</form>
<script type="text/javascript">
function check(){
var name=document.getElementById("name").value;
var contens=document.getElementById("contents").value;
if (name=="")
{
alert("用户名不能为空onsubmit");
exit();
}
if (content=="")
{
alert("内容不能为空onsubmit");
exit();
}
}
</script>
onclick事件用法：<input type="button" value="submit" onclick="check1()"/>
<form name="form" action="#" method="post">
<p><label>称呼:</label><input type="text" name="name" id="name" /></p>
<p><label>发表留言:</label><textarea name="contents" id="contents" cols="15" rows="5"></textarea></p>
<p>
<input type="button" value="submit" onclick="check1()"/>
<input type="reset" value="reset"/><p>
</form>
<script type="text/javascript">
function check1(){
var name=document.getElementById("name").value;
var contents=document.getElementById("contents").value;
if (name=="")
{
alert("用户名不能为空
}
if (contents=="")
{
alert("内容不能为空
}
}
</script>
</body>
</html>


本文出自 “让梦冬眠” 博客，请务必保留此出处http://sinmo.blog.51cto.com/2027202/852054
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航