软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> JavaScript学习笔记六 -> 正文阅读

[Web前端]JavaScript学习笔记六



本文根据慕课网课程《JavaScript进阶》学习整理

第6章 事件响应,让网页交互

6-1 什么是事件


??JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
??比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果。
??主要事件表:
??[img]http://img.mukewang.com/53e198540001b66404860353.jpg

6-2 鼠标单击事件( 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>

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

6-3 鼠标经过事件(onmouseover)


??鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。
??现实鼠标经过”确定”按钮时,触发onmouseover事件,调用函数info(),弹出消息框,代码如下:
??[img]http://img.mukewang.com/53e196e500013f1807700354.jpg
??运行结果:
??[img]http://img.mukewang.com/53e196fd00017d8704870416.jpg

6-4 鼠标移开事件(onmouseout)


??鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。
??当把鼠标移动到”登录”按钮上,然后再移开时,触发onmouseout事件,调用函数message(),代码如下:
??[img]http://img.mukewang.com/53e195580001a0bc07730356.jpg
??运行结果:
??[img]http://img.mukewang.com/53e195bf00010d1804760385.jpg

6-5 光标聚焦事件(onfocus)


??当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。
??如下代码, 当将光标移到文本框内时,即焦点在文本框内,触发onfocus 事件,并调用函数message()
??[img]http://img.mukewang.com/53e19337000113d108390338.jpg
??运行结果:
??[img]http://img.mukewang.com/5312c5660001821a04300326.jpg

6-6 失焦事件(onblur)


????onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。
????如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在文本框),在光标离开该文本框后(即失焦时),触发onblur事件,并调用函数message()
????[img]http://img.mukewang.com/53e191d00001dfe508560326.jpg
??运行结果:
????[img]http://img.mukewang.com/5312da710001968704410319.jpg

6-7 内容选中事件(onselect)


????选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。
????如下代码,当选中用户文本框内的文字时,触发onselect 事件,并调用函数message()
??[img]http://img.mukewang.com/53e190b70001ffa908560325.jpg
??运行结果:
??[img]http://img.mukewang.com/5312d7ba00013fff03950319.jpg

6-8 文本框内容改变事件(onchange)


??通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。
??如下代码,当用户将文本框内的文字改变后,弹出对话框“您改变了文本内容!”。
??[img]http://img.mukewang.com/5312d59c00011cd311490444.jpg
??运行结果:
??[img]http://img.mukewang.com/5312d5c600012c3703960319.jpg

6-9 加载事件(onload)


??事件会在页面加载完成后,立即发生,同时执行被调用的程序。
??注意

  • 加载页面时,触发onload事件,事件写在<body>标签内。

  • 此节的加载页面,可理解为打开一个新页面时。

??如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”。
??[img]http://img.mukewang.com/5312e3c10001bd9908920372.jpg
??运行结果:
??[img]http://img.mukewang.com/5312e3eb0001e8a103930318.jpg

6-10 卸载事件(onunload)


??当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。
??注意:不同浏览器对onunload事件支持不同。
??如下代码,当退出页面时,弹出对话框“您确定离开该网页吗?”
??[img]http://img.mukewang.com/5312ee6b0001f89408950418.jpg
??运行结果:(IE浏览器)
??[img]http://img.mukewang.com/546470c90001583205460464.jpg

6-11 编程综合题


??使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除。
<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>  
  <script type="text/javascript">
   function count(){

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

    //获取第二个输入框的值
    var num2=document.getElementById("txt2").value;
    var num=document.getElementById("select").value;
    var result = '';

    //获取通过下拉框来选择的值来改变加减乘除的运算法则
    switch(num)

    //设置结果输入框的值
    {case "+":
        result=parseInt(num1) + parseInt(num2);
        break;
    case "-":
        result=num1 -num2;
        break;
    case "*":
        result=num1 * num2;
        break;
    case "/":
        result=num1 / num2
    }
    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' /> 
   <form>
   <input type='button' value=' = ' onclick='count()'/> 
   </form><!--通过 = 按钮来调用创建的函数,得到结果--> 
   <input type='text' id='fruit' />   
 </body>
</html>

......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-03-29 22:59:18  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture 股票 租车
生肖星座 三丰软件 视频 开发 短信 中国文化 网文精选 搜图网 美图 阅读网 多播 租车 短信 看图 日历 万年历 2018年7日历
2018-7-23 0:44:35
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --