文档章节

JS:各种不同事件触发条件。onClick,onBlur等

筱飞
 筱飞
发布于 2016/03/15 18:13
字数 1854
阅读 267
收藏 6

JS:1.6,事件(Event)(onclick,onchange,onload,onunload,onfocus,onblur,onselect,onmuse)

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>



本文转载自:http://www.cnblogs.com/ylbtech/archive/2013/01/10/2853873.html

筱飞
粉丝 15
博文 142
码字总数 22847
作品 0
虹口
前端工程师
私信 提问
JS中onpropertychange事件和onchange事件区别

当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获。例如一个 <input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpro......

钟小华
2011/04/28
851
0
JavaScript零基础入门——(十三)JavaScript的事件

JavaScript零基础入门——(十三)JavaScript的事件 大家好,欢迎回到我们的JavaScript零基础入门。上一节课,我们了解了JavaScript定时器,也演示了一些比较经典的例子,其实我们已经用到了...

JandenMa
2018/07/01
61
0
java 私塾课堂笔记——Javascript

java 私塾课堂笔记——Javascript 1:什么是Javascript JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 2:Java和Javascript的区别 (1)、基于对象和...

luodis
2011/04/27
497
0
oninput,onpropertychange,onchange的用法和区别

1、前言 由于工作需要,需实现一个类似于微博输入框的功能,在用户动态输入文字的时候,修改提示“您还可以输入XX字”。如下图所示: 因此,稍微研究了一下oninput,onpropertychange,onchan...

ForingY
2015/11/05
31
0
百度地图使用经验-第1集:成功展现第1个地图

第1步:引入js(携带密钥) 第2步: 创建一个div 第3步: 写js 类: js自己的面向对象的特点; ES6 PHP,JAVA,C++ 插曲:事件 22小时前 事件和函数的区别: 函数是事先写好函数体,手工调用。...

宁哥实战课堂
2018/06/25
6
0

没有更多内容

加载失败,请刷新页面

加载更多

哪些情况下适合使用云服务器?

我们一直在说云服务器价格适中,具备弹性扩展机制,适合部署中小规模的网站或应用。那么云服务器到底适用于哪些情况呢?如果您需要经常原始计算能力,那么使用独立服务器就能满足需求,因为他...

云漫网络Ruan
今天
10
0
Java 中的 String 有没有长度限制

转载: https://juejin.im/post/5d53653f5188257315539f9a String是Java中很重要的一个数据类型,除了基本数据类型以外,String是被使用的最广泛的了,但是,关于String,其实还是有很多东西...

低至一折起
今天
23
0
OpenStack 简介和几种安装方式总结

OpenStack :是一个由NASA和Rackspace合作研发并发起的,以Apache许可证授权的自由软件和开放源代码项目。项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台。OpenSta...

小海bug
昨天
11
0
DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
昨天
9
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部