JavaScript事件内置对象

一事件

JavaScript创建动态页面。事件是可以被JavaScript侦测到的行为。

网页中的每个元素都可以产生某些可以触发JavaScript函数或程序的事件。

比如，当用户单击按钮或提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

主要事件表：

鼠标单击事件（onclick）

当在网页上单击鼠标时，就会发生该事件。同时onclick事件调用的程序块就会被执行，通常与按钮一起使用。

<body>
  <form>
    <input name="点击我" type="button" value="点击我" onclick="openwin()"/>
<!--openwin()为javascript函数-->
  </form>
</body>

鼠标经过事件（onmouseover）

当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

<script type="text/javascript">
    function message(){
      confirm("请输入密码后，再单击确定!"); }
</script>

<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>

鼠标移开事件（onmouseout)

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

<script type="text/javascript">
  function message(){
    alert("不要移开，点击后进行慕课网!"); }
</script>


<form>
  <a href="http://www.imooc.com" onmouseout="message()">点击我</a>
</form>

光标聚焦事件（onfocus）

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

失焦事件（onblur）

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

内容选中事件（onselect）

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

文本框内容改变事件（onchange）

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

加载事件（onload）

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

加载页面时，触发onload事件，事件写在<body>标签内。
加载页面，可理解为打开一个新页面时。

如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

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

卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发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>

二内置对象

对象

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。

使用对象前先定义，如下使用数组对象：

var objectName=new Array();//使用new关键字定义对象

//或者
var objectName=[];

访问对象属性的语法：

objectName.propertyName

访问对象的方法：

objectName.methodName()

Date 日期对象

日期对象可以储存任意一个日期，并且可以精确到毫秒数（1/1000）。

定义一个日期对象：

var Udate=new Date();//Udate为日期对象，并且已有初始值：当前时间（当前电脑系统时间）

//自定义初始值
var d=new Date(2012,10,1);
var d=new Date('Oct 1, 2012');

Date对象中处理时间和日期的常用方法：

返回/设置年份方法 get/setFullYear()

返回/设置年份，用四位数表示

var mydate=new Date();
var myyear=mydate.getFullYear();

// myyear值为2020

返回星期方法 getDay()

返回值为0~6，0表示星期天。

//如果要返回相对应“星期”，通过数组完成
<script type="text/javascript">
  var mydate=new Date();//定义日期对象
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
//定义数组对象,给每个数组项赋值
  var mynum=mydate.getDay();//mynum值为数字，比如4
  document.write(mydate.getDay());//输出getDay()获取值
  document.write("今天是："+ weekday[mynum]);//输出星期几
</script>

返回/设置时间方法 get/setTime()

单位毫秒数，计算从1970年1月1日零时到日期对象所指的日期的毫秒数。

var mydate=new Date();
mydate.setTime(mydate.getTime() + 60*60*1000);//将目前日期对象的时间推迟1小时

String字符串对象

定义字符串的方法就是直接赋值。

var mystr="test"

返回指定位置的字符 charAt()

返回的字符是长度为1的字符串。

语法：

stringObject.charAt(index)

如果参数index不在0与string.length-1之间，该方法将返回一个空字符串。

返回指定的字符串首次出现的位置 indexOf()

语法:

stringObject.indexOf(substring, startpos)
//startpos 可选，指定在字符串中开始检索的位置；省略时，从字符串首字母开始检索

如果找到一个 substring，则返回 substring 的第一次出现的位置；如果没有找到，返回-1。

字符串分割 split()

split()将字符串分割为字符串数组，并返回此数组。

语法：

stringObject.split(separator, limit)
//limit 可选参数，分割的次数。

var mystr = "www.imooc.com";
document.write(mystr.split(".")+"<br>");
document.write(mystr.split(".", 2)+"<br>");

运行结果:

www,imooc,com
www,imooc

提取字符串 substring()

语法：

stringObject.substring(startPos, stopPos)
//stopPos 可选参数

如果参数start与stop相等，那么返回就是一个空串（即长度为0的字符串）；
如果start比stop大，那么该方法在提取子串之前会先交换这两个参数。

提取指定数目的字符 substr()

从字符串中提取从startPos位置开始的指定数目的字符串。

stringObject.substr(startPos, length)
// length 可选参数，如果省略，返回从startPos到字符串末尾的字符

如果startPos为负数且绝对值大于字符串长度，startPos为0。

Math对象

Math对象是一个固有的对象，无需创建它，直接把Math作为对象使用。

Math对象属性

Math对象方法

向上取整 ceil()

Math.ceil(x)

返回大于或等于x，并且与x最接近的整数

向下取整 floor()

返回小于或等于x，并且与x最接近的整数

四舍五入 round()

对于0.5，该方法将进行向上舍入。如5.5将舍入为6.

如果 x 与两侧整数同等接近，则结果接近 +∞方向的数字值。(如 -5.5 将舍入为 -5; -5.52 将舍入为 -6),如下图:

随机数 random()

返回介于0~1（大于等于0，但小于1）之间的一个随机数。

获得0~10之间的随机数：

Math.random()*10;

Array数组对象

数组对象是一个对象的集合，里边的对象可以是不同类型的。

数组方法：

数组连接concat()

用于连接两个或多个数组，此方法返回一个新数组，不改变原来的数组。

如：把 concat() 中的参数连接到数组 mya 中，代码如下：

<script type="text/javascript">
  var mya = new Array(3);
  mya[0] = "1";
  mya[1] = "2";
  mya[2] = "3";
  document.write(mya.concat(4,5)+"<br>");
  document.write(mya); 
</script>


运行结果：

1,2,3,4,5
1,2,3

指定分隔符连接数组元素 join()

该方法把数组中的所有元素放入一个字符串中，元素是通过指定的分隔符进行分隔的。

语法:

arrayObject.join(分隔符)
//如果省略分隔符，则使用逗号作为分隔符

这个方法不影响数组原本的内容。

颠倒数组元素顺序 reverse()

该方法会改变原来的数组，而不会创建新的数组。

选定元素 slice()

从已有的数组中返回选定的元素。

arrayObject.slice(start,end)

1.返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

2. 该方法并不会修改数组，而是返回一个子数组。

数组排序 sort()

语法：

arrayObject.sort(方法函数)
//方法函数， 可选，规定排序顺序

如果不指定<方法函数>，则按unicode码顺序排列。

注意: 该方法函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

如：使用排序函数

<script type="text/javascript">
  function sortNum(a,b) {
  return a - b;
 //升序，如降序，把“a - b”该成“b - a”
}
 var myarr = new Array("80","16","50","6","100","1");
  document.write(myarr + "<br>");
  document.write(myarr.sort(sortNum));
</script>

运行结果：

80,16,50,6,100,1
1,6,16,50,80,100

一 事件