事件总结
tabindex, accesskey, onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
以上全是.下面分别介绍一下.
tabindex--
<input tabindex="9" type="taxt" size="20">
//设置按tab键移动的顺序
accesskey--
<input id="female" accesskey="f" type="radio" name="Sex" value="Female" />
//设置或返回访问单选按钮的快捷键,注释:请使用 Alt + accessKey 为拥有指定快捷键的元素赋予焦点。
onfocus--
<script type="text/javascript">
function setStyle(x){
document.getElementById(x).style.background="yellow"
}
</script>
<input type="text" onfocus="setStyle(this.id)" id="fname" />
//事件在对象获得焦点时发生,
onblur--
<script type="text/javascript">
function upperCase(){
var x=document.getElementById("fname").value
document.getElementById("fname").value=x.toUpperCase()
}
</script>
输入您的姓名:<input type="text" id="fname" onblur="upperCase()" />
//事件会在对象失去焦点时发生
onselect--
Select text: <input type="text" value="Hello world!"
onselect="alert('You have selected some of the text.')" />
<br /><br />
Select text: <textarea cols="20" rows="5"
onselect="alert('You have selected some of the text.')">
Hello world!</textarea>
//事件会在文本框中的文本被选中时发生
onchange--
<script type="text/javascript">
function upperCase(x){
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
输入您的姓名:<input type="text" id="fname" onchange="upperCase(this.id)" />
//事件会在域的内容改变时发生
onclick--
<button onclick="document.getElementById('field2').value=document.getElementById('field1').value">Copy Text</button>
//事件会在对象被点击时发生。请注意, onclick 与 onmousedown 不同。单击事件是在同一元素上发生了鼠标按下事件之后又发生了鼠标放开事件时才发生的。
ondblclick--
<button ondblclick="document.getElementById('field2').value=document.getElementById('field1').value">Copy Text</button>
//事件会在对象被双击时发生
onmousedown--
<img src="/i/example_mouse2.jpg" onmousedown="alert('You clicked the picture!')" />
//事件会在鼠标按键被按下时发生
onmouseup--
<img src="/i/eg_mouse2.jpg" alt="mouse" onmouseup="alert('您点击了图片!')" />
//事件会在鼠标按键被松开时发生
onmouseover--
<img src="/i/eg_mouse2.jpg" alt="mouse" onmouseover="alert('您的鼠标在图片上!')" />
//时间会在鼠标指针移动到指定的对象上时发生
onmousemove--
<img src="/i/eg_mouse2.jpg" alt="mouse" onmousemove="alert('您的鼠标刚才经过了图片!')" />
//事件会在鼠标指针移动时发生
onmouseout--
<img src="/i/example_mouse2.jpg" alt="mouse" onmousemove="alert('您的鼠标刚才离开了图片!')" />
//事件会在鼠标指针移出指定的对象时发生
onkeypress--
<script type="text/javascript">
function noNumbers(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<input type="text" onkeypress="return noNumbers(event)" />
//事件会在键盘按键被按下并释放一个键时发生
onkeydown--
<script type="text/javascript">
function noNumbers(e){
var keynum
var keychar
var numcheck
if(window.event) // IE
{
keynum = e.keyCode
}
else if(e.which) // Netscape/Firefox/Opera
{
keynum = e.which
}
keychar = String.fromCharCode(keynum)
numcheck = /\d/
return !numcheck.test(keychar)
}
</script>
<input type="text" onkeydown="return noNumbers(event)" />
//事件会在用户按下一个键盘按键时发生
onkeyup--
<script type="text/javascript">
function upperCase(x){
var y=document.getElementById(x).value
document.getElementById(x).value=y.toUpperCase()
}
</script>
输入您的姓名: <input type="text" id="fname" onkeyup="upperCase(this.id)" />
//事件会在键盘按键被松开时发生
onreset--
<form onreset="alert('The form will be reset')">
Firstname: <input type="text" name="fname" value="John" />
Lastname: <input type="text" name="lname" />
<input type="reset" value="Reset">
</form>
//事件会在表单中的重置按钮被点击时发生
onabort --
<img src="image_w3default.gif" onabort="alert('Error: Loading of the image was aborted')" />
//事件会在图像加载被中断时发生。当用户在图像完成载入之前放弃图像的装载(如单击了 stop 按钮)时,就会调用该句柄。
onerror--
<img src="image.gif" onerror="alert('The image could not be loaded.')" />
//事件会在文档或图像加载过程中发生错误时被触发。在装载文档或图像的过程中如果发生了错误,就会调用该事件句柄。
onresize--
<body onresize="alert('You have changed the size of the window')"></body>
//事件会在窗口或框架被调整大小时发生
onsubmit--
<form name="testform" action="jsref_onsubmit.asp" onsubmit="alert('Hello ' + testform.fname.value +'!')">
<input type="text" name="fname" />
<input type="submit" value="Submit" />
</form>
//事件会在表单中的确认按钮被点击时发生
onunload--
<body onunload="alert('The onunload event was triggered')"></body>
//事件在用户退出页面时发生
onload--
<body onload="load()"></body>
//事件会在页面或图像加载完成后立即发生