JavaScript高级用法一之事件响应与网页交互
综述
本篇的主要内容来自慕课网,事件响应与网页交互,主要内容如下
- 1 什么是事件
- 2 鼠标单击事件( onclick )
- 3 鼠标经过事件(onmouseover)
- 4 鼠标移开事件(onmouseout)
- 5 光标聚焦事件(onfocus)
- 6 失焦事件(onblur)
- 7 内容选中事件(onselect)
- 8 文本框内容改变事件(onchange)
- 9 加载事件(onload)
- 10 卸载事件(onunload)
什么是事件
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
主要事件表:
鼠标单击事件( onclick )
onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。
比如,我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add2()。代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>
|
鼠标经过事件(onmouseover)
鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。
现实鼠标经过”确定”按钮时,触发onmouseover事件,调用函数info(),弹出消息框,代码如下:
运行结果:
鼠标移开事件(onmouseout)
鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。
当把鼠标移动到”登录”按钮上,然后再移开时,触发onmouseout事件,调用函数message(),代码如下:
运行结果:
光标聚焦事件(onfocus)
当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。
如下代码, 当将光标移到文本框内时,即焦点在文本框内,触发onfocus 事件,并调用函数message()。
运行结果:
失焦事件(onblur)
onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。
如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在文本框),在光标离开该文本框后(即失焦时),触发onblur事件,并调用函数message()。
运行结果:
内容选中事件(onselect)
选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。
如下代码,当选中用户文本框内的文字时,触发onselect 事件,并调用函数message()。
运行结果:
文本框内容改变事件(onchange)
通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
如下代码,当用户将文本框内的文字改变后,弹出对话框“您改变了文本内容!”。
运行结果:
加载事件(onload)
事件会在页面加载完成后立即发生,同时执行被调用的程序。
注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。
2. 此节的加载页面,可理解为打开一个新页面时。
如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”。
运行结果:
卸载事件(onunload)
当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。
注意:不同浏览器对onunload事件支持不同。
如下代码,当退出页面时,弹出对话框“您确定离开该网页吗?”。
运行结果:(IE浏览器)
JavaScript高级用法一之事件响应与网页交互的更多相关文章
- 《javascript高级程序设计》 touch事件的一个小错误
最近一段时候都在拜读尼古拉斯大神的<javascript高级程序设计>,真的是一本好书,通俗易懂,条理比<javascript权威指南>好理解一些,当然<javascri ...
- JavaScript高级程序设计学习笔记--事件
HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()&q ...
- JavaScript进阶 - 第6章 事件响应,让网页交互
6-1什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用 ...
- JS事件-让网页交互
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...
- JavaScript高级程序设计-13:事件
JavaScript与HTML之间的交互是通过事件实现的. 一.事件流 首先我们要明白事件流的概念.当我们点击一个按钮时,也点击了按钮的容器元素,甚至也点击了整个事件.事件流描述就是从页面中接收事件的 ...
- JavaScript高级用法二之内置对象
综述 本篇的主要内容来自慕课网,内置对象,主要内容如下 1 什么是对象 2 Date 日期对象 3 返回/设置年份方法 4 返回星期方法 5 返回/设置时间方法 6 String 字符串对象 7 返回 ...
- javascript高级程序设计读书笔记-事件(一)
读书笔记,写的很乱 事件处理程序 事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别 没有DOM1 同样的事件 DOM0会顶掉html事件 因为他们都是属性 而 ...
- JavaScript高级用法三之浏览器对象
综述 本篇的主要内容来自慕课网,内置对象,主要内容如下 1 window对象 2 JavaScript 计时器 3 计时器setInterval() 4 取消计时器clearInterval() 5 ...
- javascript高级程序设计读书笔记----事件
DOM0级事件处理程序 传统处理方式,即讲一个函数赋值给一个事件处理程序属性. DOM2级事件处理程序 addEventListener()和removeHandler()两个方法用于指定和删 ...
随机推荐
- 虚拟机Ping不通主机解决
最近,装了一个虚拟机(Ubuntu-server-12.04),使用的桥接的方式.装完之后发现,主机可以ping通虚拟机,但是虚拟机可以ping通除主机之外的所有的IP(包括网关,DNS,还有其他的i ...
- BZOJ.3329.Xorequ(数位DP)
题目链接 x^3x=2x -> x^2x=3x 因为a^b+((a&b)<<1)=a+b,x^2x=x+2x,所以x和2x的二进制表示中不存在相邻的1. (或者,因为x+2x ...
- php 抽象类 静态 单体设计模式
php oop----抽象类 抽象类机制使得子类可共用基类的某些信息,具体细节会留给子类,典型用在这样情形中,抽象类并不定义全部的方法,部分方法的实现推迟到子类继承抽象类时.它是介于接口和具体类间的一 ...
- (转)理解classloader
ClassLoader翻译过来就是类加载器,普通的Java开发者其实用到的不多,但对于某些框架开发者来说却非常常见.理解ClassLoader的加载机制,也有利于我们编写出更高效的代码.ClassLo ...
- CocosCreator弹窗处理
目前我所用的也就两种方法, 放置一个几近透明的sprite,作为遮罩,防止弹窗出现后,作为背景的UI上的按钮类的响应: 2,将上述遮罩作为弹窗的背景或者弹窗的子对象[此时,需要作为子对象的第一个,防止 ...
- Qt打包成单独可执行的exe文件
1.将图标newIco.ico复制到工程目录下. 2.在工程目录下新建空白txt文档,添加以下内容. IDI_ICON1 ICON DISCARDABLE "newIco.ico" ...
- 【dedecms网站安全】如何防止dedecms网站被DDos攻击
[dedecms网站安全]如何防止dedecms网站被DDos攻击 第一步:进入后台,系统->添加新变量变量名称:cfg_anquan_cc 变量类型:布尔(Y/N) 参数说明:是否开启防CC ...
- AngularJS中写一个包裹HTML元素的directive
有这样的一个场景,这里有一个表单: <form role="form"> ...</form> 我们希望在form的外层动态包裹上一层. 有可能是这样 ...
- .Net Core邮件发送之MailKit
一 .在.Net Core中MailKit中提供了邮件的基础封装 它支持跨平台,并且支持 IMAP, POP3, SMTP 等协议 Nuget命令: Install-Package MailKit 官 ...
- C调用lua的table里面的函数
网上搜索C.C++调用lua函数,有一大堆复制粘贴的. 但是搜索<C调用lua的table里面的函数> 怎么就没几个呢? 经过探索,发现其实逻辑是这样的: 1.根据name获取table ...