JS之函数和事件
来源:互联网 发布:高三要有多努力 知乎 编辑:程序博客网 时间:2024/06/05 00:28
函数:
函数的作用:在我们需要大量重复一些过程的时候,一直写是不是很烦躁呢,通过定义函数,我们多次调用,只要输入参数就能够得到我们想要的结果啦!
知道函数的作用之后,我们怎么去创建和定义一个函数呢?
function 函数名( ){ 函数体;}
下面呢,我们来试一试创建一个
function time() {
var time=new Date();
return time;
}
ime呢,就是我们为函数取的名字了,在函数体里面,我们写的是得到现在的时间。
定义好了函数,我们可以试试怎么使用,我们调用函数的方法很简单:
time();//只要直接写函数名就好了,记得加上括号!
现在看看我们创建的函数,是不是觉得少了什么,为了更好的根据实际情况,可以创建带参数的函数:
<div style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">function 函数名(参数1,参数2)</span></div><span style="white-space:pre"></span>{ <span style="white-space:pre"></span> 函数代码<div style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">}</span></div>注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。
我们现在可以来写一个加法运算了:
<span style="white-space:pre"></span>function add(x,y)<span style="white-space:pre"></span>{ <span style="white-space:pre"></span> sum = x + y; <span style="white-space:pre"></span> document.write(sum);<span style="white-space:pre"></span>}当然,还有带返回值的函数:
<div style="text-align: center;">function app2(x,y) { var sum,x,y; sum = x * y; return sum; } var req1=app2(5,6); var req2=app2(2,3);sumq=req1+req2;document.write("req1的值:"+req1+"<br/>");document.write("req2的值:"+req2+"<br/>");document.write(req1+"与"+req2+"和:"+sumq);</div>
通过returne 我们可以实现函数的返回值,调用函数的时候就会得到返回值。
事件:
JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
主要事件表
鼠标单击事件( onclick )
onclick是鼠标单击事件,当在网页上单击鼠标时,就会发生该事件。同时onclick事件调用的程序块就会被执行,通常与按钮一起使用。
比如,我们单击按钮时,触发 onclick 事件,并调用两个数和的函数add()。代码如下:
<html><head> <script type="text/javascript"> function add(){ 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),鼠标移开事件(onmouseout);
下面来看看光标聚焦事件,其实主要是为了让大家复习下css中的下拉表
<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函数,弹出对话框。
同样的还有鼠标失焦事件:
<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()" ><br> 密码:<input name="password" type="text" value="请输入密码!" > </form></body></html>
光标选中文本框之后离开时,触发onblur事件,就会调用mesage函数,弹出对话框。
最后的内容选中事件(onselect),内容修改事件(onchange),加载事件(onload),卸载事件(onunload),其中卸载事件代码:window.onunload = message();
0 0
- JS之函数和事件
- Js事件和函数
- js之事件冒泡和事件捕获
- js之事件冒泡和事件捕获
- js之事件冒泡和事件捕获
- js之事件冒泡和事件捕获
- js之事件冒泡和事件捕获
- js之事件冒泡和事件捕获
- JS 之 onfocus事件和onblur事件
- js之事件冒泡和事件捕获
- js之事件冒泡和事件捕获
- js之事件冒泡和事件捕获
- js之事件冒泡和事件捕获
- JS事件之事件对象和事件源
- JS事件之事件类型[鼠标和滚轮事件]
- js之事件捕获和冒泡二
- js事件之onmousedown和onmouseup
- js权威指南之事件和事件处理
- nodejs Tips7
- Vim Global Command用法(g命令)
- ajaxFileUpload 怎么传相关参数到后台
- Windows下配置使用Memcached Manager
- HTML与XHTML的区别
- JS之函数和事件
- 免费图库的,做数字图像处理必备的
- Matlab分类器大全
- Photoshop CS6 自学(四)文件操作之第二部分
- 实现简易涂鸦板
- Magic Box
- JAVA博客和书籍推荐
- spring定时任务配置详解
- hadoop集群部署