JavaScript：offset、event

网址编码

一个网址有自己的网址，不同页面也有自己的id网址，我们常常会把网址送到后台，但是后台再处理有不认识的比如换行等特殊符号。所以我们要实现编码然后再传到后台：

• encodeURIComponment( )函数可以把字符串作为URI组件进行编码
• decodeURIComponment( )函数可以把字符串作为URI组件进行解码

操作字符串

• 合并字符串、连接数组： concat( )

• 取字符串： slice("取字符串的起始位置"，[结束位置] ); [ ] 可选的

// 起始位置一定要有，结束位置可以省略

// 起始位置如果是负数，则是从右边往左边开始取

slice( 3，6)：从第3个开始取到索引号为6的位置，但是不包括6

取字符串： substr(起始位置，[取得个数] ); [ ] 可选的

// 取得个数可以省略，指的是从起始位置开始往后面数几个

var txt = "abcdefghijk";

txt.substr(3，4)： 结果为defg

 兼容性的写法 ：

• 取字符串： substring( )

用法同 substr 一样，区别是：substring 始终会把小的值作为起始位置，大的值作为结束位置。如 substring(6,3)  自动变成  substring(3,6);

保留小数位数

122340.12345 保留两位有效数字 122340.12

substr( 0， .+3)

通过 indexOf 返回小数点的位置

parseInt

先乘以100 取整，再除以100

toFixed(n)     n：保留几位

例如：检查文件格式是否选择正确

缓动动画

移动速度越来越慢

offset家族

返回距离上级盒子（最近的带有定位）的位置

offset 自己的 （js中获取元素尺寸）

• offsetWidth、offsetHeight

得到对象的宽度和高度（自己的，与他人无关）

offsetWidth = width + border + padding

• offsetLeft、offsetTop

返回距离上级盒子（最近的带有定位）左边的位置

如果父级都没有定位则以 body为准

• offsetParent

返回该对象的父级（带有定位），不一定是亲爸爸，就近原则

区别：parentNode 返回父级，必须是亲的

事件对象 event

event 翻译过来就是 事件 的意思

再触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件相关的信息。所有浏览器都支持 event 对象，但支持的方式不同：

比如鼠标操作的时候，会添加鼠标位置的相关信息到事件对象中

普通浏览支持 event，ie678支持 window.event

采用兼容性写法：

event 常见属性：

pageX、clientX、screenX区别 （重点掌握）

pageX  pageY：以我们的 文档 （绝对定位）的基准点对齐

clientX   clientY：以我们的 可视区域 为基准点对齐

screen X   screenY：以我们的 电脑屏幕 为基准点对齐

常用事件

onmousemove：当鼠标移动时，执行的事件

onmouseop：当鼠标弹起时，执行的事件

onmousedown：当鼠标按下时，执行的事件

1）拖动原理

当鼠标按下时，接着移动鼠标

//  当我们按下鼠标的时候，就要记录当前鼠标的位置

2）防止选择拖动

我们知道，按下鼠标然后拖动可以选择文字，清除选中的内容：