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

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

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

课程名称JavaScript进阶篇

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

课程讲师:  慕课官方号

课程内容

内容选中事件(onselect)

选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行。

如下代码,当选中用户文本框内的文字时,触发onselect 事件,并调用函数message()。

53e190b70001ffa908560325.jpg

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
  function message(){
      var ssk=document.getElementById("b2")
ssk.innerHTML="你真棒!"
}
</script>    
</head>
<body>
  <form>
  个人简介:<br>
   <textarea id="b2" name="summary" cols="60" rows="5" onselect="message()">请写入个人简介,不少于200字!</textarea>
  </form>
</body>
</html>


http://img3.mukewang.com/632550dc00014abb07890606.jpg


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

通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。

如下代码,当用户将文本框内的文字改变后,弹出对话框“您改变了文本内容!”。


5312d59c00011cd311490444.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>
  个人简介:<br>
   <textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介,不少于200字!</textarea>
  </form>
</body>
</html>

http://img.mukewang.com/632551000001bff004490590.jpg

http://img4.mukewang.com/6325510a000190c205080293.jpg

加载事件(onload)

事件会在页面加载完成后,立即发生,同时执行被调用的程序。
注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。

      2. 此节的加载页面,可理解为打开一个新页面时。
如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”。

5312e3c10001bd9908920372.jpg

http://img.mukewang.com/632551380001c45705700448.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 onload="message()">
  欢迎学习JavaScript。
</body>
</html>

卸载事件(onunload)

当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。

注意:不同浏览器对onunload事件支持不同。

如下代码,当退出页面时,弹出对话框“您确定离开该网页吗?”

5312ee6b0001f89408950418.jpg

<!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>
  欢迎学习JavaScript。
</body>
</html>

http://img3.mukewang.com/63255178000103a607170476.jpg



课程收获

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

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