本文详细介绍了JavaScript中的各种事件，包括onClick、onChange、onFocus等，并通过实例展示了这些事件如何在HTML元素上触发相应的JavaScript函数。
JavaScript是一门脚本语言, 也是一门基于面向对象的编程语言, 虽然没有专业面向对象编程语言那样规范的类的继承,封装等, 但有面向对象的编程必须要有事件的驱动, 才能执行程序.
JavaScript的主要事件:
onClick 鼠标单击事件
onChange 文本框内容改变事件
onSelect 文本框内容被选中事件
onFocus 光标聚焦
onLoad 网页导入
onUnload 关闭网页
onBlur 移开光标
onMouseOver 鼠标事件
onMouseOut 鼠标移动事件
onClick 鼠标单击事件, 通常与按钮一起使用
<input name="button" type="button" onclick="rec(this.form)" value="面积">
onChange 文本框内容改变
<html>
<head>
<title>onChange事件</title>
</head>
<body>
<form>
<input type="text" name="change" value="欢迎光临!" onChange=alert("谢谢再次光临!")>
</text>
</form>
</body>
</html>
onFocus 聚焦事件<head>
<title>onChange事件</title>
</head>
<body>
<form>
<input type="text" name="change" value="欢迎光临!" onChange=alert("谢谢再次光临!")>
</text>
</form>
</body>
</html>
onFocus<html>
<head>
<title>onFocus事件</title>
</head>
<body>
<script>
function aihao()
{alert("选择成功!");}
</script>
请选择自己的兴趣爱好:<br>
<form>
<select name="gushi" onfocus="aihao()">
<option>体育</option>
<option>音乐</option>
<option>美术</option>
<option>其他</option>
</select>
</form>
</body>
</html>
<html>
<head>
<title>onLoad事件</title>
</head>
<body onLoad=alert("页面文件装载中,请稍候
")>
</body>
</html>
onUnLoad 卸载事件<head>
<title>onLoad事件</title>
</head>
<body onLoad=alert("页面文件装载中,请稍候
")></body>
</html>
<html>
<head>
<title>onUnLoad事件</title>
</head>
<body onUnLoad=alert("真的要退出页面吗?请单击确定.")>
</body>
</html>
onBlur 失焦事件 当光标移开当前对象时执行, 和onFocus是相对的事件.<head>
<title>onUnLoad事件</title>
</head>
<body onUnLoad=alert("真的要退出页面吗?请单击确定.")>
</body>
</html>
onBlur<html>
<head>
<title>onBlur事件</title>
</head>
<body>
<form>
口令:<input name="kouling" type="text" onBlur=confirm("口令错误,请重新输入!")>
</input>
<input name="anniu" type="button" value="确定"></input>
</form>
</body>
</html>
onMouseOver<html>
<head>
<title>onMouseOver事件</title>
</head>
<body>
<form>
口令:<input name=kouling" type="text"></input>
<input name="anniu" type="button" value="确定" onMouseOver=confirm("请输入口令后,再单击!")>
</input>
</form>
</body>
</html>
onMouseOut<html>
<head>
<title>onMouseOut事件</title>
</head>
<body>
<form>
口令:<input name=kouling" type="text"></input>
<input name="anniu" type="button" value="确定" onMouseOut=confirm("不要移开,请单击进入!")>
</input>
</form>
</body>
</html>
onDbclick 鼠标双击事件
onMouseDown 鼠标按下事件
onMouseUp 鼠标弹起事件
onMouseMove 鼠标移动事件
onKeyPress 键盘输入事件
onMove 窗口移动事件
onScroll 滚动条移动事件
..................................
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
