JS中的事件&对象

一、JS中的事件

---

（一）JS中的事件分类

---

1、鼠标事件

　　click/dblclick/onmouseover/onmouseout

2、HTML事件

　　onload/onscroll/onsubmit/onchange/onfocus

3、键盘事件

　　keydown：   键盘按下时触发

　　keypress：键盘按下并松开的瞬间触发

　　keyup：    键盘抬起时触发

 

[注意事项]

　　① 执行顺序：keydown->keypress->keyup

　　② 当长按时，会循环执行keydown->keypress

　　③ 有keydown并不一定有keyup，当事件触发过程中，鼠标将光标移走， 将导致没有keyup

　　④ keypress只能捕获键盘上的数字、字母、符号键，不能捕获各种符号键，而keydown和keyup可以。

　　⑤ keypress支持区分大小写，keydown和keyup并不支持。

[确定触发的按键]

　　① 在触发的函数中，传入一个参数e，表示键盘事件；

　　② 使用e.keyCode，取到按键的Ascll码值，进而确定触发按键；

　　③ 所有浏览器的兼容写法（一般并不需要）：

    　　var evn = e || event;

    　　var code = evn.keyCode || evn.which || evn.charCode;

（二）JS中的DOM0事件模型

---

1、内联模型(行内绑定)：

　　直接将函数名作为HTML标签的某个事件属性的属性值；

eg：<button onclick="func()">DOM0内联模型</button>

　　优点：使用方便。

　　缺点：违反了w3c关于HTML与JavaScript分离的基本原则；

2、脚本模型(动态绑定)：

　　在JS脚本中，取到某个节点，并添加事件属性；

　　优点：实现了HTML与JavaScript的分离；

　　缺点：同一个节点只能绑定一个同类型事件。如果绑定多个，最后一个生效。

（三）JS中的DOM2事件模型

---

1、添加事件绑定方式：

　　① IE8之前：btn2.attachEvent("onclick",函数);

　　② 其他浏览器：btn2.addEventListener("click",函数,true/false);

　　　　参数三：false(默认)：表示事件冒泡   true：表示事件捕获

　　③ 兼容写法：if (btn2.attachEvent) {

　　　　　　　　 btn2.attachEvent();

     　　　　   }else{

       　　　　　　 btn2.addEventListener();

    　　　　   }

 　　优点：① 可以给同一节点，添加多个同类型事件；

　　   　　 ② 提供了可以取消事件绑定的函数。

2、取消DOM2事件绑定：

注意：如果要取消DOM2的事件绑定，那么在绑定事件时，处理函数必须要使用有名函数，而不能使用匿名函数。

btn2.removeEventListener("click",func2);

btn2.detachEvent("onclick",func2);

（四）JS中的事件流

---

1、事件冒泡：

　　当某DOM元素触发一种事件时，会从当前节点开始，逐级往上触发其祖先节点的同类型事件，知道DOM根节点。

>>> 什么情况下会产生事件冒泡：

　　① DOM0模型绑定的事件，全部都是冒泡；

　　② IE8之前，使用attachEvent()绑定的事件，全部都是冒泡；

　　③ 其他浏览器，使用addEventListener()添加事件，当第三个参数省略或为alse时，为事件冒泡；

2、事件捕获：

　　当某DOM元素触发一种事件时，会从文档根节点开始，逐级向下触发其祖先节点的同类型事件，直到该节点自身。

>>> 什么情况下会产生事件捕获：

　　① 使用addEventListener()添加事件，当第三个参数为true时，为事件捕获；

3、阻止事件冒泡：

　　在IE浏览器中，使用e.cancelBubble()=true;

　　在其他浏览器中，使用e.stopPropagation();

 

兼容所有浏览器的写法：

   function myParagraphEventHandler(e) {

    　　e = e || window.event;

    　　if (e.stopPropagation) {

       　　　　 e.stopPropagation(); //IE以外

   　　 } else {

      　　　　  e.cancelBubble = true; //IE

    　　}

   }

4、取消事件默认行为

　　在IE浏览器中，使用e.returnValue = false;

　　在其他浏览器中，使用e.preventDefault();

 

兼容所有浏览器的写法：

function eventHandler(e) {

    e = e || window.event;

    // 防止默认行为

    if (e.preventDefault) {

        e.preventDefault(); //IE以外

    } else {

        e.returnValue = false; //IE

    }

}

二、JS中的内置对象

---

（一）JS中的数组

---

1、数组的基本概念？

　　数组是在内存空间中连续存储的一组有序数据的集合。

　　元素在数组中的顺序，成为下标。可以使用下标访问数组的每个元素

2、如何声明一个数组？

     ① 使用字面量声明：var arr = [];

　　 在JS中，同一数组，可以存储各种数据类型。

　　 例如：var arr=[1,"绾",true,null,func];

 

    ② 使用new关键字声明：var arr = new Array(参数);

　　 >>> 参数可以是：

　　a. 参数省略，表示创建一个空数组；

　　b. 参数为一个整数，表示声明一个length为指定长度的数组，

 　　  但是这个length可以随时可变可追加。

       c. 参数为逗号分隔的多个数值，表示数组的多个值。

　　new Array(1,2,3)==[1,2,3]

 

3、数组中元素的读写/增删

     ① 读写：通过下标访问元素。下标从0开始  arr[1]="hahaha";

     ② 增删：

　　　　a. 使用delete关键字，删除数组的某一个值。删除之后，数组的长度不变，对应位置变为Undefined。 eg：delete arr[1];

　　　　b. arr.pop()：删除数组的最后一个值。相当于arr.length -= 1;

　　　　c. arr.shift()：删除数组的第一个值。

　　　　d. arr.unshift(值)：在数组的第0个位置新增一个值；

　　　　e. arr.push(值)：在数组的最后一个位置新增一个值；

　　　　f. 直接访问数组没达到的下标，可以动态追加。arr[100]=1; 中间如果有空余下标，将存入Undefined。

4、数组中的其他方法：

　　① join("分隔符号")：将数组用指定分隔符链接为字符串。当参数为空时， 默认用英文逗号分隔

　　② concat()：【原数组不会被改变】将数组，与两个或多个数组的值链接为新数组。concat连接时，如果有二维数组，则至多能拆一层[]

　　　　[1,2].concat([3,4],[5,6])->[1,2,3,4,5,6]

　　　　[1,2].concat([3,4,[5,6]])->[1,2,3,4,[5,6]]

　　③ push() 数组最后增加一个，unshift(值) 数组开头增加一个。-返回数组的长度；

  　　  pop() 数组最后删除一个，shift() 数组开头删除一个。-返回被删除的值

    【上述方法，均会改变原数组】

　　④ reverse()：【原数组会改变】将数组翻转，倒序输出；

　　⑤ slice(begin,end)：【原数组不会被改变】截取数组中的某一部分，并返回被截取的新数组将

     >>> 传入一个参数，表示开始区间，默认截到数组最后；

     >>> 传入两个参数，表示开始和结束的下标，左闭右开区间（包含begin，不包含end

     >>> 两个参数可以为负数，表示从右边开始数，最后一个值为-1；

　　⑥ sort()：【原数组被改变】将数组进行升序排列；

     >>> 默认情况下，会按照每个元素首字母的ASCII值进行排序；

　　　　[3,1,5,12].sort()->[1,12,3,5];

    >>> 可以传入一个比较函数，手动指定排序的函数算法；

   函数将默认接收两个值a,b 如果返回值>0，则证明a>b；

       arr.sort(function(a,b){           

   　　　return a-b;//升序排列

　　　   return b-a;//降序排列

　　});                                             

 

　　⑦ indexOf(value,index)：返回数组中第一个value值所在的下标，如果没有找到返回-1

   　　 lastIndexOf(value,index)：返回数组中最后一个value值所在的下标，如果没有找到 返回-1；

　　>>> 如果没有指定index，则表示全数组查找value；

　　>>> 如果指定了index，则表示从index开始，向后查找value； 

　　⑧ forEach()：专门用于循环遍历数组。接收一个回调函数，回调函数接受两个参数，第一个参数为数组每一项的值，第二个参数为下标。

【IE8之前，不支持此函数】

   arr.forEach(function(item,index){

　　console.log(item);

　　console.log(index);

  });

 

　　⑨ map()：数组映射。使用方式与forEach()相同。不同的是，map可以有return返回值，表示将原数组的每个值进行操作后，返回给一个新数组。

【IE8之前，不支持此函数】

       var arr1=arr.map(function(item){

　　 　　console.log(item);

　　　　 return item+2;

　　});

 

5、二维数组与稀疏数组(了解)

　　① 二维数组：数组中的值，依然是一个数组形式。

　　　　eg：arr = [[1,2,3],[4,5,6]];//相当于两行三列

　　　　读取二维数组：arr[行号][列号];

　　② 稀疏数组：数组中的索引是不连续的。(length要比数组中实际的元素个数大)

6、基本数据类型&引用数据类型：

　　① 基本数据类型：赋值时，是将原变量中的值，赋值给另一个变量。赋值完成后，两个变量相互独立，修改其中一个的值，另一个不会变化。

　　② 引用数据类型：赋值时，是将原变量在内存中的地址，赋值给另一个变量。赋值完成后，两个变量中存储的是同一个内存地址，访问的是同一份数据，修改其中一个的值，另一个也会变化。 

　　③ 数值型、字符串、布尔型等变量属于基本数据类型；

      　　数组，对象属于引用数据类型

 

（二）内置对象

---

1、Boolean类

    也有两种声明方式：

    可以使用字面量方式声明一个单纯的变量。用typeof检测为Boolean类型；

    也可以使用new Boolean() 声明一个Boolean类型的对象。用typeof检测为Object类型

 

2、Number类

     Number.MAX_VALUE 返回Number类可表示的最大值；

     Number.MIN_VALUE 返回Number类可表示的最小值；

 

　toString()：将数值类型转换为字符串类型

　toLocaleString()：将数值按照本地格式顺序转换为字符串，一般从右开始，

                     三个一组加逗号分隔；

　toFixed(n)：将数字保留n位小数，并转为字符串格式；

　toPrecision(n)：将数字格式化为指定长度。n表示不含小数点的位数长度。

                  如果n<原数字长度，则用科学计数法表示；

                  如果n>原数字长度，则小数点后补0；

　valueOf()：返回Number对象的基本数字值；

 

3、String 类

3.1、属性：str.length 返回字符串的长度，字符数

 　　字符串支持类似数组的下标访问方式：str[0];

3.2、方法：

　　toLowerCase()：将字符串所有字符转成小写；

　　toUpperCase()：将字符串所有字符转成大写；

　　charAt(n)：截取数组的第n个字符，相当于str[n]；

　　indexOf("str","index")：查找字串在字符串中出现的位置，如果没有找到返回-1；

     其他同数组的indexOf方法；

　　lastIndexOf()：同数组

　　substring(begin,end)：从字符串中截取子串

>>> 传入一个参数，表示从begin开始，到最后；

>>> 传入两个参数，表示从begin到end的区间，左闭右开；

　　split("分隔符")：将字符串以指定分隔符分隔，存入数组中。传入空""表示将字符串 的每个字符分开放入数组；

　　replace("old","new")：将字符串中的第一个old替换为new；

>>> 第一个参数，可以是普通字符串，也可以是正则表达式；

>>> 如果是普通字符串，则只替换第一个old。

　　如果是正则表达式，则可以根据正则的写法要求，进行替换。

4、Date 日期类

4.1、new Date()：返回当前最新时间；

　　new Date("2017,12,12,12:12:12")：返回指定的时间；

4.2、常用方法

　　getFullYear()：获取4位年份；

　　getMonth()：获取月份0-11；

　　getDate()：获取一个月中的第几天 1-31；

　　getDay()：获取一周中的第几天 0-6,0表示周天

　　getHours()：获取小时

　　getMinutes()：获取分钟

　　getSeconds()：获取秒

    function getTime(){
                var dates=new Date();
                var year=dates.getFullYear();
                var month=dates.getMonth();
                var date1=dates.getDate();
                var day=dates.getDay();
                var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六",]
                var hours=dates.getHours()<10?"0"+dates.getHours():dates.getHours();
                var minutes=dates.getMinutes()<10?"0"+dates.getMinutes():dates.getMinutes();
                var seconds=dates.getSeconds()<10?"0"+dates.getSeconds():dates.getSeconds();

                var div1=document.getElementById("div1");
                div1.innerText=year+"年"+(month+1)+"月"+date1+"日"+weeks[day]
                               +hours+":"+minutes+":"+seconds;
            }

            setInterval(getTime,1000);
            window.onload=function(){
                getTime();
            }

　　

（三）自定义对象

---

1、基本概念：

　　① 对象：对象是拥有一系列无序属性和方法的集合。

　　② 键值对：对象中的数据，是以键值对的形式存在。对象的每个属性和方法，都对应值得一个键名，以键取值。

　　③ 属性：描述对象特征的一系列变量，称为属性。【对象中的变量】

　　④ 方法：描述对象行为的一系列函数，称为方法。【对象中的函数】

2、对象的声明：

　　① 字面量声明：   var obj = {

   　　　　　　　　　 key1:value1,

  　　　　　　　　     key2:value2,

  　　　　　　　　     func1:function(){}

     　　　　　　         }

>>> 对象中的数据是以键值对形式存储，键与值之间用:分隔。多个键之间用,分隔。

>>> 对象中的键，可以是除了数组/对象以外的任何数据类型。但是，一般我们只用普通变量名作为键。

>>> 对象中的值，可以是任何数据类型。包括数组和对象。

　　② 使用new关键字声明：var obj= new Object();

　　　　　　　　　　　　　obj.key1=value1;

　　　　　　　　　　　 　   obj.key2=value2;

　　　　　　　　　　　　　obj.function=function(){}

 

3、对象中属性和方法的读写：

① .运算符：

      对象内部：this.属性   this.方法()

      对象外部：对象名.属性    对象.方法();

② 通过["key"]调用：对象名.["属性名"] 对象名.["方法名"]();

     >>> 如果键中包含特殊字符，则只能使用第②种方式；

　 >>> 对象中，直接写变量名，默认为调用全局变量。如果需要调用对象自身的属性或者方法。需要使用对象名.属性，或者this.属性。

  　　　person.age   this.age   都可以，但推荐使用this关键字。

③ 删除对象的属性和方法：delete 对象.属性名/方法名

  　delete person.age;