事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）【转载】

2022-02-13 00:30:48

ylbtech-Event:事件(Event)对象

JS：1.6.0，事件(Event)返回顶部

HTML标记	事件	当....时候触发此事件
<A>	onClick	用户点击超链接
	onMouseOver	鼠标移动到超链接上边
	onMouseOut	鼠标离开超链接
<AREA>	onMouseOver	鼠标移动到图片 map 区域上边
<AREA>	onMouseOut	鼠标离开图片 map 区域
<BODY>	onBlur	包含这个页面的窗口 window 或帧 frame 失去焦点的时候
	onFocus	包含这个页面的窗口 window 或帧 frame 获得焦点的时候
	onLoad	这个页面下载完成的时候
	onUnload	退出这个页面的时候
<FORM>	onReset	按下 RESET (重置) 按钮的时候
<FORM>	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事件返回顶部

事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）【转载】

<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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

码农公寓

窗口事件 (Window Events)

表单元素事件 (Form Element Events)

图像事件 (Image Events)

键盘事件 (Keyboard Events)

鼠标事件 (Mouse Events)

相关文章