javascript基础之客户端事件驱动
我们知道,面向对象发展起来后,“一夜之间”,几乎所有的语言都能基于对象了,JavaScript也是基于对象的语言。用户在浏览器上的行为称作“事件”,之后引发的一系列动作,比如弹窗啦,改变浏览器大小啦,验证啦,balabala,都叫做“事件驱动”。当然,这次我主要介绍几个常常发生的事件。
ps:对于js脚本的支持以浏览器而定!!!有的低版本的浏览器可能不支持!!!
1.单击事件(onClick)
啥叫单击事件呢?当用户单击鼠标按钮是,就会产生单击事件。同时onclick指定的事件处理程序将会被调用。通常应用在button(按钮对象)、checkbox(复选框)、radio(单选按钮)、reset buttons(重置按钮)、submit buttons(提交按钮)上。
放大招:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之单击事件</title> </head>
<body>
<form>
<script language="JavaScript">
function aclick(){
alert("你刚才单击了按钮");
}
</script>
<input type="button" value="按钮" onclick= "aclick()" />
</form> </body>
</html>
效果如下图:
2.更改事件(onChange)
一旦用户更改表单的值时,就会触发onchange事件。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之更改事件</title>
<script language="JavaScript">
function check() {
alert("文本框的值发生了变化");
}
</script>
</head>
<body>
<form>
<input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>
效果如下图 :
3.选中事件(onSelect)
当页面中的元素被选中时,就会触发onselect事件。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之更改事件</title>
<script language="JavaScript">
function check() {
alert("文本框的值发生了变化");
}
</script>
</head>
<body>
<form>
<input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>
效果如下图:
4.加载事件(onLoad)
加载事件是在刚刚打开网页时,触发的事件。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之加载事件</title>
<script language="JavaScript">
function check(){
alert("莫急莫急,小D正在骑马来的路上,O(∩_∩)O哈哈~");
}
</script>
</head>
<body onload="check()">
</body>
</html>
效果如下图:
5.卸载前事件(beforeunload)
确切说,称为“离开页面前事件”比较恰当,当你单击当前标签页的关闭按钮时会触发此事件。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js基础之卸载前事件</title>
<script language="JavaScript">
function check1(){
alert("你真的要离我而去呢?╥﹏╥...");
}
</script>
</head>
<body onbeforeunload= "check1()">
<h1>这是用来验证卸载前事件的页面</h1>
</body>
</html>
效果如下图:
javascript基础之客户端事件驱动的更多相关文章
- JavaScript基础(一)
我是一个初学者,但求能学到些许知识!以下是根据韩顺平老师的<轻松搞定网页设计html+css+javascript—javascrip部分>整理而成. 为什么要学习javascript? ...
- JavaScript基础系列
JavaScript基础系列 JavaScript是一种基于对象和事件驱动的客户端脚本语言. JavaScript的注释 // 单行 /**/ 多行注释 JavaScript变量,函数名和操作符都是区 ...
- JavaScript基础细讲
JavaScript基础细讲 JavaScript语言的前身叫作Livescript.自从Sun公司推出著名的Java语言之后,Netscape公司引进了Sun公司有关Java的程序概念,将自己原 ...
- 第五模块:WEB开发基础 第2章·JavaScript基础
01-JavaScript的历史发展过程 02-js的引入方式和输出 03-命名规范和变量的声明定义 04-五种基本数据类型 05-运算符 06-字符串处理 07-数据类型转换 08-流程控制语句if ...
- JavaScript基础,Cookies,Sessions
php和JavaScript,掌握JavaScript基础,自定义函数,流程控制语句,事件,调用JavaScript脚本,在PHP中使用JavaScript. JavaScript是网景公司开发的,是 ...
- 使用jQuery快速高效制作网页交互特效第一章JavaScript基础
JavaScript 一.JavaScript概念: JavaScript面向对象事件驱动具有安全性的脚本语言,面向对象 JavaScript特点: 1.解释性语言,边运行边解释 2.和HTML页面实 ...
- 前端之JavaScript基础
前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
- javascript基础部分
javascript基础部分 1 数据类型: 基础数据类型(通过typeof来检测):Number,string,undefined,null,boolean,function typeof只能检测 ...
- 一个简单的、面向对象的javascript基础框架
如果以后公司再能让我独立做一套新的完整系统,那么我肯定会为这个系统再写一个前端框架,那么我到底该如何写这个框架呢? 在我以前的博客里我给大家展示了一个我自己写的框架,由于当时时间很紧张,做之前几乎没有 ...
随机推荐
- 反射调用与Lambda表达式调用
想调用一个方法很容易,直接代码调用就行,这人人都会.其次呢,还可以使用反射.不过通过反射调用的性能会远远低于直接调用——至少从绝对时间上来看的确是这样.虽然这是个众所周知的现象,我们还是来写个程序来验 ...
- MVC基础知识-持续更新....
1.如何在自动生成的视图中显示需要的字段名称: 在相应的定义字段中添加Display,例如: [Display(Name = "用户名:")] public string User ...
- Java之循环练习2
吐槽O(∩_∩)O:由于前几天电脑坏了,除了在弄电脑的同时又在练习科目三了,又是晒了三天网鱼都没打了.计划还是赶不上变化,真的是让人乱了节拍啊.咔!吐槽完毕,让我们的循环练习继续. 练习一:一个人很倒 ...
- Newtonsoft.Json 基本用法
Newtonsoft.Json 是.net 开源的一个json格式处理类库 官方网站:http://json.codeplex.com/ 在使用的项目引用Newtonsoft.Json库.平常使用的方 ...
- 【学习笔记】【C语言】三目运算符
1.N目运算符 像逻辑非(!).负号(-)这种只连接一个数据的符号,称为“单目运算符”,比如!5.-5.像算术运算符.关系运算符.逻辑运算符这种连接二个数据的负号,称为“双目运算符”,比如6+7.8* ...
- Mysql 格式化日期格式
DATE_FORMAT(date, format) 根据格式串format 格式化日期或日期和时间值date,返回结果串. 可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值, ...
- javascript之面向对象程序设计(对象和继承)
总结的文章略长,慎点. 知识点预热 引用类型:引用类型的值(对象)是引用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起.在其他面向对象语言中被称为类,虽然 ...
- 在MAC系统上进行屏幕录制
最近打算将一些软件操作过程进行屏幕录制进行视频分享,所以寻思着找一块能在MAC上使用的屏幕录制软件.google了一番,没想到MAC系统自带的QuickTime Player已经内置屏幕录像功能,而且 ...
- 在指定的DSN中,驱动程序和应用程序之间的体系结构不匹配
今天在使用plsql通过odbc导入excel数据时发生了一个错误,截图如下: 错误提示为:驱动程序和应用程序之间的体系结构不匹配. 后来百度了一下,得出答案.系统是win10 64位.excel驱动 ...
- win32开发基础
收集的,正在学习... 跟我一起玩Win32开发(1):关于C++的几个要点 跟我一起玩Win32开发(2):完整的开发流程 跟我一起玩Win32开发(3):窗口的重绘 跟我一起玩Win32开发(4) ...