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

JS：1.6事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）

2015-05-22 15:14 579 查看


JS：1.6，事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）

Event:事件(Event)对象
事件(Event)
HTML 4.0 事件属性
onclick
onchange
onload
onunload
onselect
onmouse
onfoucs-onblur
checkbox-onclick

JS：1.6.0，事件(Event)返回顶部
HTML标记事件当....时候触发此事件
<A>onClick用户点击超链接
onMouseOver鼠标移动到超链接上边
onMouseOut鼠标离开超链接
<AREA>onMouseOver鼠标移动到图片 map 区域上边
onMouseOut鼠标离开图片 map 区域
<BODY>onBlur包含这个页面的窗口 window 或 帧 frame 失去焦点的时候
onFocus包含这个页面的窗口 window 或 帧 frame 获得焦点的时候
onLoad这个页面下载完成的时候
onUnload退出这个页面的时候
<FORM>onReset按下 RESET (重置) 按钮的时候
onSubmit按下 SUBMIT (提交) 按钮的时候
<IMG>onAbort下载图片的过程被用户手动停止的时候
onLoad图片下载完成的时候
onError在客户端接收图片时有错误发生
<INPUT> with

TYPE="BUTTON"

或 "CHECKBOX"

或 "RADIO"

或 "RESET"		onClick鼠标点击时候
<INPUT> with

TYPE="TEXT"

或 <TEXTAREA>		onBlur获得焦点的时候
onChange输入框/文本框中的文本被改变的时候
onFocus获得焦点的时候
onSelect输入框/文本框中的文本被选中 (高亮显示) 的时候
<INPUT> with

TYPE="SELECT"		onBlur失去焦点的时候
onChange用户改变了下拉列表框中的选择
onClick用户使用鼠标点击的时候
onFocus获得焦点的时候
JS：1.6.0.1,HTML 4.0 事件属性返回顶部
HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
在现代浏览器中都内置有大量的事件处理器。这些处理器会监视特定的条件或用户行为，例如鼠标单击或浏览器窗口中完成加载某个图像。通过使用客户端的 JavaScript，可以将某些特定的事件处理器作为属性添加给特定的标签，并可以在事件发生时执行一个或多个 JavaScript 命令或函数。
事件处理器的值是一个或一系列以分号隔开的 Javascript 表达式、方法和函数调用，并用引号引起来。当事件发生时，浏览器会执行这些代码。例如，当您把鼠标移动到一个超链接时，会启动一个 JavaScript 函数。支持 JavaScript 的浏览器支持 <a> 标签中的一个特殊的 "mouse over"事件处理器 - 被称为 onmouseover 来完成这项工作：
<a href="/index.html" [code]onmouseover="alert('Welcome');return false"
></a>[/code]
下面的表格提供了标准的事件属性，可以把它们插入 HTML/XHTML 元素中，以定义事件行为。

窗口事件 (Window Events)

仅在 body 和 frameset 元素中有效。
属性值描述
onload脚本当文档载入时执行脚本
onunload脚本当文档卸载时执行脚本

表单元素事件 (Form Element Events)

仅在表单元素中有效。
属性值描述
onchange脚本当元素改变时执行脚本
onsubmit脚本当表单被提交时执行脚本
onreset脚本当表单被重置时执行脚本
onselect脚本当元素被选取时执行脚本
onblur脚本当元素失去焦点时执行脚本
onfocus脚本当元素获得焦点时执行脚本

图像事件 (Image Events)

该属性可用于 img 元素：
属性值描述
onabort脚本当图像加载中断时执行脚本

键盘事件 (Keyboard Events)

在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, 以及 title 元素。
属性值描述
onkeydown脚本当键盘被按下时执行脚本
onkeypress脚本当键盘被按下后又松开时执行脚本
onkeyup脚本当键盘被松开时执行脚本

鼠标事件 (Mouse Events)

在下列元素中无效：base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style, title 元素。
属性值描述
onclick脚本当鼠标被单击时执行脚本
ondblclick脚本当鼠标被双击时执行脚本
onmousedown脚本当鼠标按钮被按下时执行脚本
onmousemove脚本当鼠标指针移动时执行脚本
onmouseout脚本当鼠标指针移出某元素时执行脚本
onmouseover脚本当鼠标指针悬停于某元素之上时执行脚本
onmouseup脚本当鼠标按钮被松开时执行脚本
JS：1.6.1,onclick事件返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function hello_girl()
{
alert("小姐，你好！");
}
function fun1(str)
{
alert("你好,"+str);
}
</script>
</head>

<body>
<h3>MENU:onclick 单击事件</h3>
<input type="button" value="问候先生" name="hello1" onclick="alert('先生，你好！')" />
<input type="button" value="问候女士" name="hello1" onclick="hello_girl()" />
<hr />
有参数
<input type="button" value="先生" name="hello1" onclick="fun1('先生')" />
<input type="button" value="女士" name="hello1" onclick="fun1(this.value)" />
<hr />
<input type="button" value="女士" name="hello1" onclick="javascript:alert('你好吗？')" />
<input type="button" value="你吃饭了吗" name="hello1" onclick="javascript:return confirm('你确认吃饱了？')" />
</body>
</html>


JS：1.6.2，onchange事件返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function change(str)
{
document.getElementById("span1").innerText=str;
}
</script>
</head>

<body>
<h3>MENU：onchange</h3>
电话：<input id="txtTel" type="text"  onchange="change(this.value)"  /><br />
你填写的电话为：<span id="span1"></span>
</body>
</html>


JS：1.6.3，onload事件返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function hello()
{
alert("新年快乐！");
}
</script>
</head>

<body onload="hello()">
<h3>MENU：onload事件</h3>
</body>
</html>


JS：1.6.4，onunload事件，返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function logout()
{
var bool=confirm("你确认要退出吗？");
if(bool)
{
//第一种情况，直接关闭页面
//window.close();
//第二种情况，退出并跳转到登陆页面
location.href="http://www.baidu.com";
}
}
</script>
</head>

<body onunload="logout()">
<h3>MENU:onunload</h3>
<input type="button" value="退出" onclick="logout()" />
</body>
</html>


JS：1.6.5，onselect事件，返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function change(str)
{
document.getElementById("span1").innerText=str;
}
</script>
</head>

<body>
<h3>MENU:onselect</h3>
电话：<input id="txtTel" type="text"  onselect="change(this.value)"  /><br />
你填写的电话为：<span id="span1"></span>
</body>
</html>


JS：1.6.6，onmouse事件，返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body bgcolor="#CCCCCC">
<h3>onmouse事件</h3>
<input type="button" value="改变颜色" onmousedown="document.bgColor='aqua'"
onmouseup="document.bgColor='red'"  onmouseout="document.bgColor='blue'"/>
</body>
</html>


JS：1.6.7，onfoucs_onblur事件，返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function begin()
{
usid.value="";
}
function end()
{
alert("请输入确认信息，谢谢！");
}
</script>
</head>

<body>
<h3>MENU：onfocus事件和onblur事件</h3>
<input type="text" value="请输入用户名" name="usid" onfocus="begin()" onblur="end()" />
<input type="button" value="提交" />

</body>
</html>


JS：1.6.8，checkbox-onclick事件，返回顶部
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script language="javascript">
function list(check_b,txt)
{
var str_S=txt.value;
var str_C=check_b.value;
if(check_b.checked==true)
{
txt.value=str_S+str_C;
}
else
{
str_S=str_S.replace(str_C,"");
txt.value=str_S;
}
}
</script>
</head>

<body>
我们选择了：<input type="text" name="t_1" value="" readonly="true" />
<br />
<input type="checkbox" value="苹果 " onclick="list(this,t_1)" >苹果</input>
<input type="checkbox" value="香蕉 " onclick="list(this,t_1)" >香蕉</input>
<input type="checkbox" value="芹菜 " onclick="list(this,t_1)" >芹菜</input>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航