继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第12天 JavaScript进阶篇

勤满不满
关注TA
已关注
手记 33
粉丝 0
获赞 24

课程名称JavaScript进阶篇

课程章节:第6章 事件响应,让网页交互

课程讲师:  慕课官方号

课程内容

鼠标移开事件(onmouseout)

鼠标移开事件,当鼠标移开当前对象时,执行onmouseout调用的程序。

当把鼠标移动到"登录"按钮上,然后再移开时,触发onmouseout事件,调用函数message(),代码如下:

53e195580001a0bc07730356.jpg

编程练习

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

http://img3.mukewang.com/6323f7ad0001a0d404700583.jpg

光标聚焦事件(onfocus)

当网页中的对象获得聚点时,执行onfocus调用的程序就会被执行。

如下代码, 当将光标移到文本框内时,即焦点在文本框内,触发onfocus 事件,并调用函数message()。

53e19337000113d108390338.jpg

编程练习

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


http://img3.mukewang.com/6323f7dc0001fdc805710591.jpg


失焦事件(onblur)

onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

如下代码, 网页中有用户和密码两个文本框。当前光标在用户文本框内时(即焦点在文本框),在光标离开该文本框后(即失焦时),触发onblur事件,并调用函数message()。

53e191d00001dfe508560326.jpg

编程练习

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

http://img.mukewang.com/6323f82e00019be707790488.jpg


课程收获

谢谢老师,讲的非常细致,很容易懂。这一节学习了什么是鼠标移开,聚焦,失焦的事件,想要完全掌握还需要大量练习,通过学习我了解了每个事件的触发条件过程,以及在什么情况下使用,给以后的学习打下了基础。以及对数据有了新的认识,期待后边的学习!

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP