js注意点自结篇

1.绑定事件的区别

ele.addEventListener(type,fn,false) ele.attachEvent('on'+type,fn)

谷歌，火狐，IE11 IE8

this表示ele(当前绑定事件的对象) this表示window

3个参数 2个参数

事件类型无on 事件类型带on

2.事件三个阶段 (e.eventPhase)

①捕获阶段：从外向里

②目标阶段：最开始选中的那个

③冒泡阶段：从里向外

3.addEventListener中的第三个参数控制事件的阶段

fasle 冒泡阶段

true 捕获阶段

4.阻止事件冒泡

IE8 window.event.cancelBubble = true;

其他 e.stopPropagation()

5.事件参数e在IE8中不存在，所以用window.event来代替

6.页面加载事件

什么叫页面加载完毕？

页面中所有的内容，标签，属性，文本，包括外部引入的js文件

window.onload = function () {

}

7.location对象

window.location.hash // 地址栏上#后面的内容

host // 主机名+端口号

hostname // 主机名

pathname // 地址栏的虚拟路径

port // 端口号

protocol // 协议

search // get请求后面的参数带?

8.history对象

window.history.forward();

back();

9.navigator对象

window.navigator.userAgent;// 判断用户浏览器的类型

window.navigator.platform;// 系统平台类型

10.定时器的编写和清除！！

var timeId = setInterval(fn,1000) // 1000ms = 1s

window.clearInterval(timeId)

11.offset系列

ele.offsetParent

ele.offsetWidth // 元素的宽，有边框

ele.offsetHeight // 元素的高，有边框

ele.offsetLeft // 元素距离左边位置的距离

ele.offsetTop // 元素距离上面位置的距离

未脱离文档流的情况下

offsetLeft: (所有父级元素margin + border+padding)+自己的margin

脱离文档流的情况下

offsetLeft：自己的left + 自己的margin

12.document获取固定元素

document.body // body

document.title // 标签中的值

document.documentElement // html

13.图片跟着鼠标飞

document.onmousemove = funciton(e) {

$('img').style.left = e.clientX + 'px';

$('img').style.top = e.clientY + 'px';

}

14.scroll系列

ele.scrollWidth // 元素中内容的实际宽度(如果内容很少,元素自身的宽),无边框

ele.scrollHeight // 元素中内容的实际高度(如果内容很少,元素自身的高),无边框

ele.scrollLeft // 向左卷曲出去的距离

ele.scrollTop // 向上卷曲出去的距离

15.无论是否脱标获取left值

if(window.getComputedStyle){

    return window.getComputedStyle(ele,null)[attr];

}else {

    return ele.currentStyle[attr];

}

16.client系列(可视区域)

clientWidth // 可视区域的宽(没有边框),边框内部的宽度

clientHeight // 可视区域的高(没有边框),边框内部的高度

clientLeft // 左边边框的宽度

clientTop // 上边框的宽度

17.判断函数传入几个参数

arguments.length,arguments[0]

IE8不支持，e也没有，用window.event来代替

兼容：

e = window.event || e;

IE8不能用e.pageX 和 e.pageY

最终：clientX + 卷曲出去的距离

18.父级元素事件冒泡，必须是是相同事件才能阻止

猜你喜欢