关于javascript事件响应的基础语法总结(必看篇)
1、onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用
//例子
<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>
//单击按钮时，触发 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.jb51.net" 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="60" rows="5" 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="60" rows="5">请写入个人简介，不少于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 语法基础 想学习js的朋友可以看看
1:javascript区分大小写 2:javascript每一条语句必须以";"结束,与C语言一样 3:输出:document.write("字符串")--->还可以输出对应的html标记 4:改变窗体的颜色document.bgColor="red"; 4:类型转换:parseInt,parseFloat 5:随机函数:parseInt(Math.random()*90+10) 产生10--100的随机数 5:弹出对话框:alert(&
-
JavaScript 语法集锦 脚本之家基础推荐
click() 对象.click() 使对象被点击. closed 对象.closed 对象窗口是否已关闭true/false clearTimeout(对象) 清除已设置的setTimeout对象 clearInterval(对象) 清除已设置的setInterval对象 confirm("提示信息") 弹出确认框,确定返回true取消返回false cursor:样式 更改鼠标样式 hand crosshair text wait help default auto e/s/w/n
-
Javascript基础教程之JavaScript语法
1.区分大小写 javascript中,变量.函数.运算符都区分大小写. 2.弱类型变量 定义变量只用 "var"关键字 复制代码 代码如下: var age = 25; var myscholl = "sanxiao"; var mal = true; 3.每行结尾的分号可有可无. 4.括号用于代码块. 代码示例 复制代码 代码如下: <!DOCTYPE html> <html> <head lang="en"
-
JavaScript学习笔记之基础语法
JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.switch语句: for循环.while循环.do while循环: 标签.break.continue: try catch throw语句. 可以查看文后的参考链接. 后面的内容都是JavaScript中不同的部分. 本文先说上面内容中的几个细节不同. 1.全等判断 JavaScript的比较运算符中有一个全等判断===,是用来判断值
-
关于javascript事件响应的基础语法总结(必看篇)
1.onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用 //例子 <html> <head> <script type="text/javascript"> function add2(){ var numa,numb,sum; numa=6; numb=8; sum=numa+numb; document.write("两数和为:"+sum); }
-
JavaScript基础教程——入门必看篇
JavaScript他是一种描述性语言,其实他并不难学,只要用心学,一定会学好,我相信大家在看这篇文章的时候,一定也学过HTML吧,使用JavaScript就是为了能和网页有更好的交互,下面切入主题. 一. JavaScript 1.什么是JavaScript JavaScript是一种描述性语言,也是一种基于对象(Object)和事件驱动(Event Driven)的,并具有安全性的脚本语言. 2.JavaScript的特点 JavaScript主要用来向HTML页面添加交互行为. JavaS
-
JS基础随笔(菜鸟必看篇)
在学习的过程中总会一次次的冒出以前囫囵吞枣的地方,下面将今天学到的一下知识点记录下来方便以后查看. JavaScript中的数据类型 简单(基本)数据类型:Number.String.Boolean.Undefined.Null 复杂(引用)数据类型: Object.Array.Date.function等 下面介绍一下简单(基本)数据类型和复杂(引用)数据类型的区别: 简单数据类型:在栈内直接存储值,如下图所示 复杂数据类型:在栈内存储引用,如下图 在了解以上两种数据类型的存储方式之后可以区分
-
整理Javascript事件响应学习笔记
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 1.鼠标单击事件(onclick) onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件.同时onclick事件调用的程序块就会被执行,通常与按钮一起使用. 例:我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add2(). <html> <head> <scrip
-
Javascript基础学习笔记(菜鸟必看篇)
什么是变量? 变量是用于存储信息的容器 变量的声明 语法: var 变量名 变量名 = 值; 变量要先声明再赋值 变量可以重复赋值 变量的命名规则 变量必须以字母开头: 变量也能以$和_符号开头(不过我们不推荐这么做): 变量名称对大小写敏感(a和A是不同的变量). 语句 语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾. 有个好的编码习惯,都要以 ; 结尾 数据类型 在JavaScript中,一段信息就是一个值(value).值有不同的类型,大家最熟悉的类型是数字.字符串(strin
-
C#学习笔记整理_变量等基础语法(必看篇)
C#学习笔记1: 变量的作用域冲突时,调用实例变量:this.a,调用类变量:类名.a 常量总是静态的,必须初始化,一般用全大写格式,声明关键字为const,如const int NUNBE = 10; C#的基本预定义类型内置于.NET Framework结构中(System),object是基类: 整型:System.SByte.System.Int16.System.Int32.System.Int64 有符号的8位.16位.32位.64位分别表示为sbyte.short.int.long
-
javaScript知识点总结(必看篇)
1.javaScript的概念:是一种表述语言,也是一种基于对象(Object)和事件驱动(EventDriven)的,安全性好的脚本语言,运行在客户端,从而减轻服务器端的负担,总结如下: 1.javaScript主要用来向HTML页面找那个添加交互行为. 2.javaScript是一种脚本语言,语法和java类似. 3.javaScript一般用来编写客户端脚本. 4.javaScript是一种解释性语言,边执行边解释. 2.javaScript由核心语法ECMAScript.浏览器对象模型(
-
详谈PHP基础与JS操作的区别(必看篇)
嵌入页面方式 JS嵌入方式:<script></script> PHP嵌入方式:<?php ?>(常用) 输出语法 Javascript输出 1.alert("警告的内容") 2.prompt("提示的内容") 3.document.write()(页面输出内容) PHP输出 1.echo(常用)//可同时输出多个字符串 eg:echo $a,"hello"; 2.print //只能输出一个字符串 eg:pr
-
Javascript 一些需要注意的细节(必看篇)
1.使用 === 代替 == JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践. "如果两边的操作数具有相同的类型和值,===返回true,!==返回false."--JavaScript:语言精粹 然而,当使用==和!=时,你可能会遇到类型不同的情况,这种情况下,操作数的类型会被强制转换成一样的再做比较,这可能不是你想要的结果. 2.Eval == 邪恶 起初不太熟悉时,"eval"让我们能够访问Jav
-
JavaScript_object基础入门(必看篇)
之前写Java时老是有点蒙,大部分都是用jQuery,但原理还不是很清楚,最近一段时间在系统的学习JavaScript,有什么问题或错误请指出,多谢..................... Object所有类的基础类 var obj = new Object(); var obj = {}; //实例化对象 给对象设置属性分为两种: 1.使用直接量的方式:对象.属性/方法,这种方式直观.易懂 obj.name = '张三'; obj.age = 20; obj.sex = '男'; obj.s