事件模型
事件是一种异步编程的实现方式。本质上程序各个组成部分之间的通信。DOM支持大量的事件。
1. EventTarget接口
DOM的事件操作(监听和触发),都定义在EventTarget接口上。Element节点、document节点和window对象,都部署了这个接口。
该接口有三个重要的方法:
- addEventListener:绑定事件的监听函数
- removeEventListener:移除事件的监听函数
- dispatchEvent:触发事件
- addEventListener
该方法用于在当前节点或对象上,定义一个特定时间的监听函数。’
- removeEventListener()
移除addEventListener方法添加的事件监听函数。 - dispatchEvent():一般不怎么使用。
2.监听函数
监听函数是事件发生时,程序所要执行的函数。它是事件驱动编程模式的主要编程方式。
在DOM中提供三种方法为事件绑定监听函数。
- HTML标签的on-属性
HTML语言允许在元素标签的属性中,直接定义某些事件的监听代码。
- Element节点的事件属性
- Element节点对象有事件属性,同样可以指定监听函数。
3.事件的种类
鼠标事件
鼠标事件是指与鼠标操作相关的事件
click事件、dblclick事件
mouseup事件(释放按下鼠标时触发)、mousedown事件(按下鼠标键时触发)、mousemove事件(鼠标在某个节点内部移动时触发)
mouseover事件、mouseenter事件都是鼠标进入一个节点时触发,区别是mouseenter只执行一次,而mouseover会在子节点上触发多次。
mouseout事件、mouseleave事件都是鼠标离开节点时触发,mouseout事件会冒泡,mouseleave事件不会。
contextmenu事件(节点上点击鼠标右键时触发或者按下上下文菜单键时触发)
事件冒泡和捕获
事件流包含三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后阶段是冒泡阶段。
Number对象的方法
Number.toString()
:把数值类型转化为字符串Number.toPrecision()
:将数值转化为指定位数的有效数字
String对象的属性和方法
length
属性:返回字符串的长度charAt()
方法:返回指定位置的字符,参数从0开始编号concat()
方法:用于连接两个字符串,返回一个新的字符串,不改变原字符串slice()
方法:用于从原字符串中取出子字符串,并返回,不改变原字符串substring()
方法:用于从原字符串取出子字符串,并返回,不改变原字符串。与slice作用相同,但有些奇怪的规则,不建议使用 substring
,优先使用 slice
。substring()indexOf()
和lastIndexOf()
:确定一个字符串在另一个字符串中的位置,返回一个整数,表示匹配开始的位置。如果返回-1表示没有匹配到。indexOf
是从头部开始匹配,lastIndexOf
是从尾部开始匹配。trim()
:去除字符串两端的空格,返回一个新的字符串,不改变原字符串substr()
:方法用于从原字符串中取出子字符串并返回,不改变原字符串,接受两个参数,第一个参数是子字符串开始位置,第二个参数是子字符串的长度。toLowerCase()
、toUpperCase()
:将字符串全部改为小写或者大写,返回一个新的字符串,不改变原来字符串。search()
:返回匹配的第一位置,没有找到返回-1replace()
:该方法用于替换匹配的字符串,一般情况下只匹配第一个匹配到的元素split()
:按照给定字符分割字符串,并返回一个由分割字符串分割出来的子字符串数组。match()
:对字符串进行正则匹配,返回匹配结果。
Array实例的方法
push()
:用于在数组的末端添加一个元素,并返回添加元素后的数组长度。该方法会改变原来的数组。
pop()
:删除数组的最后一个元素,并返回该元素。该方法也会改变原来的数组
join()
:以参数作为分隔符,将所有数组元素组成一个字符串进行返回,如果不提供参数,默认以逗号分隔。
concat()
:多个数组的合并。将新数组的成员添加到原数组的尾部,然后返回一个新数组。原数组不变。
如果希望把一个数组进行“浅”复制,可以使用该方法。
shift()
:删除数组的第一个元素,并返回该元素。该方法会改变原来的数组。
unshift()
:用于在数组的第一个位置添加元素,并返回新数组的数组长度。该方法会改变原来的数组。
reverse()
:颠倒数组中元素的顺序,返回改变后的数组,会改变原来的数组
slice()
:提取原数组的一部分,返回一个新的数组,原数组不变。
第一个参数是起始位置,第二个参数是终止位置,如果第二个参数不填写,则一直返回到原数组的最后一个成员。
splice()
:删除原数组的一部分成员,并可以在删除的位置添加新的成员,返回值是被删除的元素,该方法会改变原数组。
第一个参数是删除的起始位置,第二个参数是被删除的元素个数。如果后面还有参数,表示这些就是要被插入数组的新元素。