【JavaScript】事件 | ♥毛球Josey♥的博客

学习时间：2016.12.12

1.什么是事件

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

2.鼠标单击事件 onclick

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

3.鼠标经过事件 onmouseover

<!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" onmouseover="message()" >
<input name="确定" type="button" value="确定"/>
</form>
</body>
</html>](https://hexo.io/docs/generating.html)

4.鼠标移开事件 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 onmouseout="message()">
  <a href="http://www.imooc.com">点击我</a>
</form>
</body>
</html>

5.光标聚集事件 onfocus

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
  <script type="text/javascript">
  var tag=0
    function message(){
        if(tag == 0)
        {
	  alert("请选择，您现在的职业！");
    tag =1;
        }
	}
  </script>
</head>
<body>
请选择您的职业：<br>
  <form>
    <select name="career" onfocus="message()"> 
      <option>学生</option> 
      <option>教师</option> 
      <option>工程师</option> 
      <option>演员</option> 
      <option>会计</option> 
    </select> 
  </form>
</body>
</html>

6.失焦事件 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>

7.内容选中事件 onselect

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
  function message(){
    document.execCommand("Copy");
    alert("已成功复制到剪切板！");
    }
</script>    
</head>
<body>
  <form>
  个人简介：<br>
   <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
  </form>
</body>
</html>

8.文本框内容改变事件 nochange

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

9.加载事件 onload

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

10.卸载事件 onunload

卸载事件通俗的讲，就是离开当前网页，离开当前网页有两种方式，

像平常我们关闭网页，也就是离开网页了；2.在当前网页点击加载其他网页，跳转到其他网页，也是离开当前网页的一种；

onunload属于第2种，只有当你要跳转到另一个页面时，也就是要离开当前网页了，要跳转到另一个网页了，onunload才会被触发；

那平常时关闭网页就直接跳出一个对话框是怎么办到的？原来还有一个onbeforeunload,顾名思义，就是在onunload被执行之前，就被调用，无论是以上2种跳转方法中的哪种，onbeforeunload都会被触发。

①目前试了Firefox、Google Chrome、IE三个浏览器，该事件只对IE起作用。

②onunload事件对于刷新页面和超链接跳转其他页面情况有效，对于关闭页面无效。

③onbeforeunload事件才对关闭页面有效。

④window.onunload = onunload_message后面不需要加()。如果有人不管加没加()，都在页面跳转和刷新时弹不出提示框，是因为IE限制了网页运行脚本或ActiveX控件，点击“允许阻止的内容”，再刷新和跳转就可以看到效果了。

⑤加了()的，在页面一打开就会弹出提示框，这个不是我们要实现的效果。