Javascript进阶篇——( 事件响应)笔记整理

什么是事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

鼠标单击事件（onclick）
onclick是鼠标单击事件，当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。
例：我们单击按钮时，触发 onclick 事件，并调用两个数和的函数add2()。

 <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>

注意: 在网页中，如使用事件，就在该元素中设置事件属性。

鼠标经过事件（onmouseover）
鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。
当鼠标经过"确定"按钮后，调用message()函数，弹出消息对话框。

 <!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>

鼠标移开事件（onmouseout）
鼠标移开事件，当鼠标移开当前对象时，执行onmouseout调用的程序。
当鼠标移开"点击我"的按钮时，调用message()函数，弹出消息对话框。

 <!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>

光标聚焦事件（onfocus）
当网页中的对象获得聚点时，执行onfocus调用的程序就会被执行。
当下拉列表得到焦点时，调用message()函数，就弹出对话框“"请选择，您现在的职业！”。

 <!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>

失焦事件（onblur）
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="请输入用户名！" >

     密码:

     <input name="password" type="text" value="请输入密码！" onblur="message()">

 </form>

 </body>

 </html>

内容选中事件（onselect）
选中事件，当文本框或者文本域中的文字被选中时，触发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>

文本框内容改变事件（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" onchange="message()">请写入个人简介，不少于200字！</textarea>

 </form>

 </body>

 </html>

加载事件（onload）
事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意： 1. 加载页面时，触发onload事件，事件写在<body>标签内。
　　 2. 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

 <!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>

 </html>

卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发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 onunload="onunload_message">

   欢迎学习JavaScript。

 </body>

 </html>

测试结果发现只有在IE浏览器里执行，其他浏览器不执行。

使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

提示：获取元素的值设置和获取方法为：例：

赋值：document.getElementById(“id”）.value = 1；

取值：var = document.getElementById(“id”）.value；

parseInt()函数可解析一个字符串,并返回一个整数。//如果不使用parseInt()那么2+3的值为23；

 <!DOCTYPE html>

 <html>

  <head>

   <title> new document </title>

   <script type="text/javascript">

    function count(){

         var txt1   = parseInt( document.getElementById('txt1').value);//获取第一个输入框的值

         var txt2   = parseInt( document.getElementById('txt2').value);//获取第二个输入框的值

         var select = document.getElementById('select').value;//获取选择框的值

         var result = '';

         switch (select)

          {

             case '+':

                 result = txt1 + txt2;

                 break;

             case '-':

                 result = txt1 - txt2;

                 break;

             case '*':

                 result = txt1 * txt2;

                 break;

             case '/':

                 result = txt1 / txt2;

                 break;

          }

          document.getElementById('fruit').value = result;//设置结果输入框的值

    }

   </script>

  </head>

  <body>

    <input type='text' id='txt1' />

    <select id='select'>

         <option value='+'>+</option>

         <option value="-">-</option>

         <option value="*">*</option>

         <option value="/">/</option>

    </select>

    <input type='text' id='txt2' />

    <input type='button' value='  =  '  onclick = "count()" /> <!--通过 = 按钮来调用创建的函数，得到结果-->

    <input type='text' id='fruit' />

  </body>

 </html>

Javascript进阶篇——( 事件响应)笔记整理的更多相关文章

二、JavaScript语言--JS基础--JavaScript进阶篇--事件响应
1.什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户 ...
Javascript进阶篇——(流程控制语句)笔记整理
做判断(if语句)if语句是基于条件成立才执行相应代码时使用的语句.语法: if(条件){ 条件成立时执行代码 } 例子:假设你应聘web前端技术开发岗位,如果你会HTML技术,你面试成功,欢迎加入公 ...
＃笔记＃JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
JavaScript进阶--慕课网学习笔记
JAVASCRIPT—进阶篇给变量取个名字(变量命名) 变量名字可以任意取,只不过取名字要遵循一些规则: 1.必须以字母.下划线或美元符号开头,后面可以跟字 ...
JavaScript进阶篇 - -第1章系好安全带
第1章系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...
【JavaScript学习】-事件响应，让网页交互
什么是事件: JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单 ...
6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
Javascript进阶篇——(函数)笔记整理
这节是根据慕课网和JavaScript DOM编程艺术一书加起来做的笔记什么是函数如果需要多次使用同一段代码,可以把它们封装成一个函数.函数(function)就是一组允许在你的代码里随时调用的语句 ...

随机推荐

学习笔记DAY2
Pycharm使用 1.添加模板 file => settings =>Editor=>file and code template => python script => ...
node 安装express
环境:win7 64位旗舰版 1 安装nodejs 2 安装npm 3 安装express 重点介绍安装express,前提是你已经安装nodejs和npm了. 1 安装express npm ins ...
Http请求和响应报文基础知识
一 HTTP请求报文(http://en.wikipedia.org/wiki/List_of_HTTP_header_fields) 请求报文由三部分组成:请求行,请求头和请求体. 请求行:请求方法 ...
第二章 Android Studio使用第三方模拟器
1.为什么要使用第三方模拟器 Android Studio自带模拟器,相对Eclipse来说项目启动速度的确快了很多倍,提高了开发效率.但和第三方模拟器进行对比的话,还是第三方的模拟器运行速度更快些. ...
实习小白笔记一(鼠标悬停、获取多选、提交修改、layer页面、单元格文字长度、json、分页、左连接)
①easyui 当鼠标悬停显示单元格信息: $(this).datagrid('doCellTip',{'max-width':'600px','delay':300}); ②jquery 获取che ...
WAMP下定义wordpress固定连接出现文章页面404
在修改为如下设置后,一切更新正常,但回到博客主页访问单独文章时出现了404问题最后一项改为index.php/%postname%后可正常访问,但是去掉那个php文件则不行. 找到的解决方法为:开启 ...
php连接postgresql
在ubuntu下用php连接postgresql需要下个模块php5-pgsql 连接数据库并显示一张表的内容: <?php #连接数据库 $conn = pg_connect("ho ...
Linux vps无法发送邮件
首先安装sendmail软件...yum install sendmail /etc/init.d/php-fpm restart 来检查下sendmail是否正常运行 /etc/init.d/sen ...
mongodb batchInsert
看到<MongoDB 权威指南>第二版P30提到了一个batchInset的插入方法,对于一次性插入大量数据时可以提高性能.按照书上的列子,却提示错误: 本书是基于MongoDB V2.4 ...
SQL Server 2005中的分区表（四）：删除（合并）一个分区
在前面我们介绍过如何创建和使用一个分区表,并举了一个例子,将不同年份的数据放在不同的物理分区表里.具体的分区方式为: 第1个小表:2010-1-1以前的数据(不包含2010-1-1). 第2个小表: ...

Javascript进阶篇——( 事件响应)笔记整理

Javascript进阶篇——( 事件响应)笔记整理的更多相关文章

随机推荐

热门专题