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

最新推荐文章于 2020-06-17 17:08:21 发布
最新推荐文章于 2020-06-17 17:08:21 发布
阅读量331 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/Amyheartxy/p/8045931.html
版权

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>
复制代码

 

 

warn作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

转载于:https://www.cnblogs.com/Amyheartxy/p/8045931.html

weixin_30457465
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript----同时指定onclick 与onfocus .....
05-22 2245
onfocus 在tap 或者浏览器页面再次出现 onclick
常见HTML中的事件,onload，onclick，onchange，--Javaweb
chenzitian6058的博客
04-28 273
onload事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // var patt1 = new RegExp("e"); // 字符串中是否包含字符e // var patt1.
关于onBlur,onFocus,onChange,onpropertychange,Onselect事件
美好的天空
10-09 731
onBlur:当失去输入焦点后产生该事件onFocus:当输入获得焦点后，产生该文件Onchange:当文字值改变时，产生该事件 onpropertychange:当元素属性改变时，产生该事件 （限IE浏览器） Onselect:当文字加亮后，产生该文件   1、可以这样说，onpropertychange要比onchange先触发事件，前者是有连带反映的。举个例子，前者更适合做搜索...
JS中onfocus()事件，onblur()事件，onload()事件
狼魂之力
06-17 637
onfocus 事件在对象获得焦点时发生。 实例： <html> <head> <script type="text/javascript"> function setStyle(x) { document.getElementById(x).style.background="yellow" } </script> </head> <body> First name: <inp.
html事件（onclick、onchange等）传对象作为参数
fenfenguai的专栏
06-28 5186
其原理其实很简单就是把对象先解析成字符串然后再转换为json对象。
JavaScript获取onclick、onchange等事件值的代码
10-27
在这里，`getAttributeNode("onchange")`返回了一个`Attr`对象，该对象的`nodeValue`属性就是`onchange`事件中绑定的字符串`javascript:test();`。 需要注意的是，`getAttributeNode()`返回的是一个属性节点，而...
纯JavaScript实现获取onclick、onchange等事件的值
10-24
获取`onchange`事件的值与`onclick`类似，但需要注意`onchange`通常包含一个函数调用。 ```javascript // 获取onchange事件的值 var onchangeValue = document.getElementById('city').getAttributeNode('onchange'...
jsp中select的onchange事件用法实例
10-23
为了响应用户的选择变化（如选择了不同的项），可以使用JavaScript编写事件监听函数，并通过onchange事件与之关联。本文将详细探讨在JSP中如何使用select的onchange事件，包括数据库查询、数据遍历及与JavaScript的...
详解mpvue中使用vant时需要注意的onChange事件的坑
10-16
同样，collapse组件的onChange事件应该通过添加@符号来监听，并在事件处理函数中通过event.mp.detail来获取事件详情。 最后，在实际开发中，使用vant-weapp组件库需要特别注意组件的文档说明，以确保按照mpvue框架...
onclick,onfocus,onblur,onload事件
aline2013的博客
10-27 1193
onFocus事件就是当光标落在文本框中时发生的事件。 onBlur事件是光标失去焦点时发生的事件。是说明曾经获得过焦点； onload事件,onunload事件--加载页面/图像完成发生的事件，用户退出页面发生的事件，onabort--加载被中断发生的事件； onmouseover,onmouseout,onmousedown,onmouseup事件--鼠标移过元素，离开元素，
JS：1.6，事件（Event）（onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse）
weixin_34202952的博客
01-10 261
ylbtech-Event:事件(Event)对象 事件(Event) HTML 4.0 事件属性 onclick onchange onload onunload onselect onmouse onfoucs-onblur checkbox-onclick JS：1.6.0，事件(Event)返回顶部 ...
html元素事件 onload onunload onsubmit onselect
old_man31的博客
02-09 393
&amp;lt;!doctype html&amp;gt; Document beijing shanghai
跳转页面后特定元素获得焦点事件
Hao-Z-Y
02-12 476
类名为con_text的元素获得了焦点 document.querySelector(".con_text").focus(); id为con_text的元素获得了焦点  document.querySelector("#con_text").focus();
JavaScript语言
weixin_30416497的博客
08-03 311
1.Java跟JavaScript有什么联系? 2.JavaScript是解释型语言还是编译型语言？ 3.JavaScript语言是否可以开发服务器程序？ 4.node.js是什么? 5.jQuery是什么？ 6.<script>标签中可以直接执行JS语句和定义JS函数。对吗? 7.<script>标签可以位于文档的任意部分，但是一般置于<hea...
onload、onunload()、onchange（）、　onmouseover和onmouseout和onmouseup和onmousedown
03-26 305
onload（）事件和onunload（）事件： 都是需要浏览器加载完后触发， onload（）是用户进入页面时调用。 onunload（）是用户离开页面时调用。 onchange（）一般用于用户表单中input， 例子：当用户输入字母时将小写字母转化为大写字母 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit...
JavaScript中onchange与onclick及onselect的区别
HelloCode的博客
03-03 2402
//2019.3.3 没有最好的程序，只有更好的程序 JavaScript中onchange与onclick及onselect的区别 onclick 鼠标单击时触发该事件 onchange 当元素的内容发生改变时触发该事件，比如在下拉菜单&lt;select&gt;中的使用。 onselect ...
Javascript题库
weixin_34133829的博客
11-14 7581
一、填空题 JavaScript有两种引用数据类型 ：__数组___、__对象__。 Javascript通过__setTimeout___延迟指定时间后，去执行某程序。 Javascript里String对象通过__indexOf__方法取第一次出现子字符 串的字符位置。 Javascript里取字符串的长度是__.length__,取数组的长度是 ___.length_____...
JavaScript事件处理详解：onload、onclick与onblur示例
在给定的示例中，主要介绍了JavaScript中的几个常见事件，包括onload、onclick、onblur以及onsubmit。下面将详细讨论这些事件的使用及其重要性。 ### 1. `onload`事件 `onload`事件在网页或DOM元素完全加载后触发，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值