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()两个方法用于指定和删 ...
随机推荐
- [NOIP2017]逛公园 最短路+拓扑排序+dp
题目描述 给出一张 $n$ 个点 $m$ 条边的有向图,边权为非负整数.求满足路径长度小于等于 $1$ 到 $n$ 最短路 $+k$ 的 $1$ 到 $n$ 的路径条数模 $p$ ,如果有无数条则输出 ...
- 潭州课堂25班:Ph201805201 爬虫高级 第一课 pyspider框架 (课堂笔记)
利用wheel安装 S1: pip install wheelS2: 进入www.lfd.uci.edu/~gohlke/pythonlibs/,Ctrl + F查找pycurl 这个包名是pycur ...
- mongoDB进行分组操作
一.$group 进行分组 1.每个职位的雇员人数: db.getCollection('emp').aggregate( [ {'$group':{ ‘_id’:'$job', job_count: ...
- cvc-complex-type.2.4.a: Invalid content was found starting with element 'property'. One of '{"http:// www.springframework.org/schema/beans":import, "http:// www.springframework.org/schema/beans":a
因为property并未被<bean class="">标签包围, 所以要用bean标签包围即可
- 面向对象数据库(Object Oriented Databases)
前面说几句费话.如今正在从事面向对象数据库在国内的推广工作,假设有兴趣能够与我联系. 假设有不论什么问题能够私信我,也能够到我们站点上 面向对象数据库交流社区 来向我提问,我一定以最快的速度解答. 想 ...
- Geek地生活,文艺地思考
本文纯属整理自己零碎杂乱的思绪,和题目无关. 不知觉间,大学已经两年过去了,忙忙碌碌了两年,大一那年參加了学生会编 辑部和艺术团舞蹈队,课余时间的生活总是被舞蹈队排练.參演和编辑部 ...
- SQL Server 导出Excel有换行的解决方法
参考地址::https://vcoo.cc/blog/1234/ 从 SQL Server 查询结果中复制结果数据粘贴到 Excel 中存在这么个问题:如果字段内容中有换行符,那么粘贴到 Excel ...
- iOS: 数据持久化方案
数据持久化方案(如果总结不到位,或者有误的地方,敬请斧正) 一.功能: 主要是将数据持久化到本地,减少对网络请求的次数,既节省了用户的流量,也增强了App的体验效果. 二.种类: plist存储:使 ...
- 版本控制-搭建git服务器
GitHub是一个免费托管开源代码的Git服务器,如果我们不想公开项目的源代码,又不想付费使用,那么我们可以自己搭建一台Git服务器. 下面我们就看看,如何在Ubuntu上搭建Git服务器.我们使用V ...
- C#语言
封面 书名 版权 前言 目录 第Ⅰ部分 C#语言 第1章 NET体系结构 1.1 C#与.NET的关系 1.2 公共语言运行库 1.2.1 平台无关性 1.2.2 提高性能 1.2.3 语 ...