事件句柄

首页 > JavaScript语法 > 事件句柄

目录

■ 一览

onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onMouseMove, onLoad, onUnload, onFocus, onBlur, onSubmit, onReset, onChange, onResize, onMove, onDragDrop, onAbort, onError, onSelect

事件句柄

事件句柄写在标签的属性部分里。比如,想按下按钮时执行 JavaScript 代码,就像下面这样写。(不同版本的浏览器能使用的事件句柄有可能不同。)

<form action="#">
<input type="button" value="OK" onclick="alert('OK')">
</form>

用分号(;)把 JavaScript 代码分隔开,可以执行复数的语句。

<form action="#">
<input type="button" value="OK" onclick="alert('A'); alert('B')">
</form>

事件句柄里也可以使用函数。函数通常定义在 <head>~</head> 之间。

<html>
<head>
<title>举例</title>
<script type="text/javascript">
<!--
function hanshu() {
    alert("OK");
}
// -->
</script>
</head>
<body>
<form action="#">
<input type="button" value="OK" onclick="hanshu()">
</form>
</body>
</html>

在 <a> 和 <input type="submit"> 上使用 onClick 句柄时,如果设定返回值为 false 的话,可以使此事件无效。

<script type="text/javascript">
<!--
function queding() {
    if (window.confirm("确定吗?")) {
        return true;
    } else {
        return false;
    }
}
// -->
</script>

<a href="xxx.htm" onclick="return queding()">XXX</a>

<form action="xxx.cgi">
<input type="submit" value="OK"
       onclick="return queding('OK');">
</form>

■ 各种事件句柄

onclick=scripts
ondblclick=scripts

鼠标点击时(onclick)与 鼠标双击时(ondblclick)触发。

<form action="#">
<input type="button" value="OK" onclick="alert('OK')">
</form>
onkeydown=scripts
onkeypress=scripts
onkeyup=scripts

按下键盘按键时(onkeydown)、按下并放开键盘按键时(onkeypress)、放开键盘按键时(onkeyup)触发。

<form action="#">
<input type="text" onkeypress="alert('OK')">
</form>
onmousedown=scripts
onmouseup=scripts
onmouseover=scripts
onmouseout=scripts
onmousemove=scripts

按下鼠标按键时(onmousedown)、放开鼠标按键时(onmouseup)、鼠标指针移动到对象上时(onmouseover)、鼠标指针从对象上离开时(onmouseout)、鼠标指针移动时(onmousemove)触发。

<a href="#"
   onmouseover="alert('OVER')"
   onmouseout="alert('OUT')"><img alt="xxx"
   src="xxx.gif" height=100 width=100></a>
onload=scripts
onunload=scripts

页面或图像加载完毕时(onload)、跳转到其他页面或退出页面时(onunload)触发。

<body onload="alert('Hello')" onunload="alert('Bye')">
onfocus=scripts
onblur=scripts

对象获得焦点时(onfocus)、对象失去焦点时(onblur)触发。

<form action="#">
<input type="text" onfocus="alert('Hello')">
</form>
onsubmit=scripts
onreset=scripts

表单被提交时(onsubmit)、表单中的重置按钮被点击时(onreset)触发。把返回值设定为 false 时,可以使这些按钮本来的动作无效。

<form action="xxx.cgi" onsubmit="return queding()">
<input type="text" name="WORD">
<input type="submit" value="OK">
</form>
onchange=scripts

表单元素的内容改变时触发。

<form action="#">
<select onchange="alert('changed')">
<option>AAA</option>
<option>BBB</option>
</select>
</form>
onresize=scripts
onmove=scripts

窗口被调整大小时(onresize)、窗口被移动时(onmove)触发。


<body onresize="alert('Resize')" onmove="alert('Move')">

ondragdrop=scripts

文件被拖拽到窗口内时触发。要取得被拖拽进窗口文件的 URL 时需使用 event.data ,并且需要更改安全设定。

<body ondragdrop="alert(event.type)">
onabort=scripts

图像加载被中断时触发,比如图像还没加载完成用户就按了停止按钮等。在 <img> 标签中使用。

onerror=scripts

读取失败时触发。可以在 <body>、<img> 等标签中使用。

<img src="xx.gif" alt="xx" onerror="alert('图像读取失败')">
onselect=scripts

文本被选择时触发。