Javascript常用互动方法及事件响应

最新推荐文章于 2020-10-03 22:41:14 发布

fanxs98

最新推荐文章于 2020-10-03 22:41:14 发布

阅读量270

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaWeb

本文链接：https://blog.youkuaiyun.com/qq_36986067/article/details/83413077

JavaWeb 专栏收录该内容

28 篇文章

订阅专栏

本文详细介绍JavaScript中常用的互动方法，包括输出内容、警告、确认和提问等对话框使用，以及打开和关闭窗口的功能。此外，还深入探讨了各种事件响应机制，如鼠标单击、经过、移开事件，失焦事件，内容选中事件，文本框内容改变事件，加载事件和卸载事件，为读者提供了丰富的实践案例。

一、常用互动方法

JavaScript-输出内容（document.write）

JavaScript-警告（alert 消息对话框）

JavaScript-确认（confirm 消息对话框）

<script type="text/javascript">
    var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大，要学习噢!");   }
</script>

JavaScript-提问（prompt 消息对话框）

弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }

JavaScript-打开新窗口（window.open）

JavaScript-关闭窗口（window.close）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>close()</title>
  <script type="text/javascript">
     var mywin=window.open("http://www.imooc.com");
     mywin.close();
  </script>
</head>
<body>
</body>
</html>

二、事件响应

鼠标单击事件( onclick ）

鼠标经过事件（onmouseover）

鼠标移开事件（onmouseout）

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

<!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="请输入用户名！" >
   <br>
   密码:<input name="password" type="text" value="请输入密码！"onblur="message()" >
  </form>
</body>
</html>

内容选中事件（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. 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

卸载事件（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>
  欢迎学习JavaScript。
</body>
</html>