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

JS的事件响应，与网页交互

2017-12-20 22:30 239 查看

事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。



鼠标单击事件( onclick ）

<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum);  }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>


鼠标经过事件（onmouseover）

现实鼠标经过”确定”按钮时，触发onmouseover事件，调用函数message，弹出消息框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>


鼠标移开事件（onmouseout）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
function message(){
alert("不要移开，点击后进行"); }
</script>
</head>
<body>
<form>
<a href="http://www.imooc.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>


光标聚焦事件（onfocus）

当将光标移到文本框内时，即焦点在文本框内，触发onfocus 事件，并调用函数message()。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择，您现在的职业！");
}
</script>
</head>
<body>
请选择您的职业：<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>


失焦事件（onblur）

当光标从密码文本框离开
d67c
时，触发onblur 事件，调用message()函数。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入密码后，在移开!"); }
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名！" >
密码:<input name="password" type="text" value="请输入密码！" onblur="message()">
</form>
</body>
</html>


内容选中事件（onselect）

当选中用户文本框内的文字时，触发onselect 事件，并调用函数message()。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>


文本框内容改变事件（onchange）

当用户将文本框内的文字改变后，弹出对话框“您改变了文本内容！”。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
alert("您改变了文本内容！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>


加载事件（onload）

事件会在页面加载完成后，立即发生，同时执行被调用的程序。

注意：

1. 加载页面时，触发onload事件，事件写在
<body>
标签内。

2. 此节的加载页面，可理解为打开一个新页面时。

如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
</html>


卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

【注意】不同浏览器对onunload事件支持不同。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
</head>
<body>
欢迎学习JavaScript。
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航