ylbtech-Event:事件(Event)对象
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" onmouseover="alert('Welcome');return false"
></a>
下面的表格提供了标准的事件属性,可以把它们插入 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>
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |