JavaScript事件响应的基础语法总结
1、onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用
//例子
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=;
numb=;
sum=numa+numb;
document.write("两数和为:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>
//单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()
2、onmouseover是鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>
//鼠标经过"确定"按钮时，触发onmouseover事件，调用函数message()，弹出消息框
3、onmouseout鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
function message(){
alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
<a href="http://www.imooc.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>
//当把鼠标移动到"点击我"按钮上，然后再移开时，触发onmouseout事件，调用函数message()
4、onfocus事件是当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择，您现在的职业！");
}
</script>
</head>
<body>
请选择您的职业：<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>
//当下拉列表得到焦点时，调用message()函数，就弹出对话框“"请选择，您现在的职业！”。
5、onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入密码后，在移开!"); }
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名！" onblur="message()" >
密码:<input name="password" type="text" value="请输入密码！" >
</form>
</body>
</html>
//当光标从密码文本框离开时，触发onblur 事件，调用message()函数。
6、onselect选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="" rows="" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
//当选中个人简介文本框中文字时(相当于复制粘贴中的复制这个行为就是选中文本)，触发onselect事件，并弹出对话框。
7、onchange事件是通过改变文本框的内容来触发onchange事件，同时执行被调用的程序
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
alert("您改变了文本内容！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="" rows="">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
//改变文本框内容时，鼠标的聚点还在文本框的时候并不会弹出对话框，但当改变完内容后，鼠标移动到别处（鼠标聚点离开文本框的时候）便会立刻调用message()函数，弹出对话框“您改变了文本内容！”
8、onload加载事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意： 加载页面时，触发onload事件，事件写在<body>标签内。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
//加载页面时，弹出对话框“加载中，请稍等…”。
9、onUnload卸载事件当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
</head>
<body>
欢迎学习JavaScript。
</body>
</html>
//当退出页面时，弹出对话框“您确定离开该网页吗？”。
JavaScript事件响应的基础语法总结的更多相关文章
- javascript中正则表达式的基础语法
× 目录 [1]定义 [2]特点 [3]元字符[4]转义字符[5]字符组[6]量词[7]括号[8]选择[9]断言[10]模式[11]优先级[12]局限性 前面的话 正则表达式在人们的印象中可能是一堆无 ...
- JavaScript快速入门-ECMAScript基础语法
一.JavaScript引入方式 1.行内式 <script> alert(123); </script> 2.外链式 <script src='custom.js'&g ...
- JavaScript表达式和运算符 —— 基础语法（4）
JavaScript基础语法(4) 运算符 运算符用于将一 个或者多个值变成结果值. 使用运算符的值称为操作数,运算符和操作数的组合称为表达式 JS中的运算符可以分成下面几类: 算术运算符 逻辑运算符 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法
1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...
- Javascript进阶篇——(JS基础语法)笔记整理
根据慕课网学习整理到一起的笔记,把东西整理到一起看起来比较方便 什么是变量字面意思:变量是可变的量:编程角度:变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可 ...
- javascript 事件响应
1.基本事件 2.点击事件 <html> <head> <script type="text/javascript"> function add ...
- JavaScript的基础语法及DOM元素和事件
一,JavaScript是什么? 1,JavaScript简称:js,是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行.主要用来实现网页的动态效果,用户交互及前后端的数据传输等. 2,J ...
- 浅谈JavaScript的事件响应
原文出处: Christian Heilmann 译文出处:Chajn Science 每当猴子们问我JavaScript和DOM里啥东西最牛逼时,我都会一巴掌打回去:卧槽还用问么当然是事件响应了 ...
- javascript基础语法——词法结构
× 目录 [1]java [2]定义 [3]大小写[4]保留字[5]注释[6]空白[7]分号 前面的话 javascript是一门简单的语言,也是一门复杂的语言.说它简单,是因为学会使用它只需片刻功夫 ...
随机推荐
- 第一百二十七节，JavaScript，JSON数据类型转换，数据转换成字符串，字符串转换成数据
第一百二十七节,JavaScript,JSON数据类型转换,数据转换成字符串,字符串转换成数据 学习要点: 1.JSON语法 2.解析和序列化 前两章我们探讨了XML的结构化数据,但开发人员还是觉得这 ...
- Error creating bean with name 'contentCategoryController': Injection of autowired dependencies failed;
在springmvc.spring.mybatis搭建的工程中出现了一大串错误 查了代码后发现,原来是在ContentCategoryServiceImpl中忘了写一句话@Service(),以至于因 ...
- PDF转换成Txt
我的弱智想法是所有能转换成PDF的文件,就都用PDF预览,上传成功后开启一个线程把文档转换成PDF,PDF再转换成txt. 目的是把txt插入索引进行全文检索. 调用的时候 string filePa ...
- svn 目录设置为 不提交 忽略
svn 忽略 以下文件 和目录 (不提交) runningtime --选中 tortoiseSVN --unversion and add to ignore list web workspace ...
- QGIS
project(GisFreeMap) set(CMAKE_BUILD_TYPE Debug) find_package(Qt4 REQUIRED QtCore QtGui QtXml) includ ...
- 修改release management client对应的服务器的地址
参考资料:http://stackoverflow.com/questions/25313053/how-to-change-a-release-management-server-name-in-r ...
- centos7下引导win7
1.使用root身份(必须)打开 /boot/grub2/grub.cfg 2.找到 ### BEGIN /etc/grub.d/30_os-prober ### 在后面添加 menuentry &q ...
- Ubuntu14.04安装PHP5
因为任务需要在Ubuntu14.04的server版本下安装PHP5,所以总结一下 使用root进行安装 要么在前面加上sudo进行安装. apt-get install php5-cgi ap ...
- 关于java集合排序
对于排序,java开发者并不陌生. 为避免以后遗忘,现在再次总结一下! 常见8大排序算法, 平时自己熟悉的只有几种种!冒泡,二分/折半.插入.快排等!现在一一讲解一下,这里只讲思想,暂时不做实现! 一 ...
- 数据集下载 MNIST
The Street View House Numbers (SVHN) Dataset SVHN is a real-world image dataset for developing machi ...