JAVA编程

JavaScript基本语法-JavaScript的事件

日期:2015/6/28来源: IT猫扑网

javaScript是基于对象(object-based的语言。而基于对象的基本特征,就是采用事件驱动(event-driven)。它是在图形界面的环境下,使得一切输入变化简单化.通常鼠标或热键的动作我们称之为事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为事件驱动(Event Driver)。而对事件进行处理程序或函数,我们称之为事件处理程序(Event Handler)。
利用JavaScript的事件,主要有下面两个用途:
●  验证用户输入窗体的数据
●  增加页面的动态效果
一般来说,一个利用JavaScript实现交互功能的Web网页总是有3个部分的内容:
●  在Head部分定义一些 javascript函数,其中的一些可能是事件处理函数,另外一些可能是为了配合这些事件处理函数而编写的普通函数。
●  HTML本身的各种控制标记。
●  拥有句柄属性的 HTML标记,主要涉及到一些界面元素。这些元素可以把HTML同JavaScript代码相连。
为了理解JavaScript的事件处理模型,可以设想一下在一个Web页面可能会遇到怎样的用户响应。归纳起来,必须使用的事件主要有3大类:
一类是引起页面之间跳转的事件,主要是超链接事件;在一类是浏览器自己引起的事件,例如网页的装载、表单的提交等;另一类事件是在表单内部同界面对象的交互,包括界面对象的选定、改变等。可以按照应用程序的具体功能自由设计。
onClick事件
鼠标单击事件是最常见的事件之一,当用户单击鼠标按钮时。同时onClick指定的事件处理程序或代码将被调用执行。
文件范例:15-14.htm>
在脚本中使用onClick事件。
01  <!-- ------------------------------ -->
02  <!-- 文件范例:15-14.htm -->
03  <!-- 文件说明:OnClick事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnClick事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="button" Value="请点击我" onClick=alert("你好!")>
12  </Form>
13  </BODY>
14  </HTML>
文件说明
第11行使用 onClick事件弹出警告提示对话框。
onChange事件
onChange事件就是当文本框的内容改变时发生的事件。
文件范例:15-15.htm
在脚本中使用onChange事件。
01  <!-- ------------------------------ -->
02  <!-- 文件范例:15-15.htm -->
03  <!-- 文件说明:OnChange事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnChange事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="text" name="Test" value="Test" onChange=alert("TextBox值发生了变化!")>
12  </Form>
13  </BODY>
14  </HTML>
文件说明
第11行使用onChange事件,当文本框内容发生改变的时候弹出警告提示对话框。
onSelect事件
onSelect事件就是当文本框的内容被选中时发生的事件。
文件范例:15-16.htm
在脚本中使用onSelect事件
01  <!-- ------------------------------ -->
02  <!-- 文件范例:15-16.htm -->
03  <!-- 文件说明:OnSelect事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnSelect事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="text" name="Test" value="Test" onSelect=alert("我被选中了!")>
12  </Form>
13  </BODY>
14  </HTML>
文件说明
第11行使用onSelect事件,当文本框中内容被选中的时候,警告提示对话框显示的结果。
onFocus事件
onFocus事件就是当光标落在文本框中时发生的事件。
文件范例:15-17.htm
在脚本中使用onFocus事件。
01  <!-- ------------------------------ -->
02  <!-- 文件范例:15-17.htm -->
03  <!-- 文件说明:OnFocus事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnFocus事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="text" name="Test1" value="Test1">
12  <Input type="text" name="Test2" value="Test2" onFocus=alert("我成为了输入焦点!")>
13  </Form>
14  </BODY>
15  </HTML>
文件说明
第12行使用Onfocus事件,当用鼠标选中第二个文本框的时候,自动触发Onfocus事件,弹出一个对话框。
onLload事件
onload事件是当前的网页被显示时发生的事件。
文件范例:15-18.htm
在脚本中使用onload事件
01 <!-- ------------------------------ -->
02  <!-- 文件范例:15-18.htm -->
03  <!-- 文件说明:OnLoad事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnLoad事件</TITLE>
08  </HEAD>
09  <BODY onLoad=alert("正在载入!")>
10  <Form>
11  </Form>
12  </BODY>
13  </HTML>
文件说明
第9行使用OnLoad事件,当打开网页的时候自动打开一个警示框。
onUnload事件
onUnload事件是当当前的网页被关闭时发生的事件。
文件范例:15-19.htm
在脚本中使用onUnload事件
01  <!-- ------------------------------ -->
02  <!-- 文件范例:15-19.htm -->
03  <!-- 文件说明:OnUnLoad事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnUnLoad事件</TITLE>
08  </HEAD>
09  <BODY onUnLoad=alert("欢迎再来!")>
10  <Form>
11  </Form>
12  </BODY>
13  </HTML>
文件说明
第9行使用onUnload事件,当关闭网页的时候自动打开一个警示框。
onBlur事件
onBlur事件就是当光标离开文本框中时发生的事件。
文件范例:15-20.htm
在脚本中使用onBlur事件
01  <!-- ------------------------------ -->
02  <!-- 文件范例:15-20.htm -->
03  <!-- 文件说明:OnBlur事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>OnBlur事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Form>
11  <Input type="text" name="Test1" value="Test1">
12  <Input type="text" name="Test2" value="Test2" onBlur=alert("我失去了输入焦点!")>
13  </Form>
14  </BODY>
15  </HTML>
文件说明
第12行使用onBlur事件,当用鼠标离开第二个文本框的时候,自动触发onBlur事件,弹出一个对话框。
onMouseover事件
onMouseover事件是指当鼠标移动到页面元素上方时发生的事件。
文件范例:15-21.htm
在脚本中使用onMouseover事件
01  <!-- ------------------------------ -->
02  <!-- 文件范例:15-21.htm -->
03  <!-- 文件说明:onMouseOver事件 -->
04  <!-- ------------------------------ -->
05  <HTML>
06  <HEAD>
07  <TITLE>onMouseOver事件</TITLE>
08  </HEAD>
09  <BODY>
10  <Marquee onMouseOver=this.stop()>滚动新闻</Marquee>
11  </BODY>
12  </HTML>
文件说明
第10行使用onMouseover事件,当鼠标指向滚动文字的时候,自动触发onMouseover事件。
onMouseout事件
onmouseout事件是指当鼠标离开页面元素上方时发生的事件。
文件范例:15-22.htm
在脚本中使用onmo

相关文章

相关下载

网友评论

我要评论...
    没有更早的评论了
    取消