js学习笔记

parentNode              获取父节点

children                获取子节点(只包括直接子级)

childNodes              获取子节点(包括文本节点)

previousElementSibling  获取上一个兄弟节点

nextElementSibling      获取下一个兄弟节点

firstElementChild 获取首子节点

lastElementChild 获取尾子节点

createElement 创建节点

appendChild 从后面添加一个元素

insertBefore 从前面添加一个元素(参数)

cloneNode(true)        克隆元素(参数)

removeChild 删除元素

物体信息:

offsetLeft

offsetTop

offsetWidth

offsetHeight

获取定位父级:offsetParent

获取物体的绝对位置:

getBoundingClientRect()

.top

.left

.right

.bottom

事件:

onmouseenter  onmouseleave  onmousemove onmouseout

onmouseover

onmousedown

onmouseup

dblclick

keydown

keyup

blur

focus

onload

onerror

click

contextmenu

resize

scroll

change

getAttriBute   获取自定义属性

setAttribute      设置自定义属性

removeAttribute       删除自定义属性

事件对象及兼容

var  oEvent=ev||event;

clientX    鼠标在可视区中X轴的距离

clientY   鼠标在可视区中Y轴的距离

scrolltop  滚动的距离

scrollHeight 内容高度

clientHeight 可视区高度

clientWidth 可视区宽度

取消冒泡:

cancelBubble=true

stopPropagation()

innnerHTML的bug会?

清空事件

事件捕获:

setCapture

releaseCapture

阻止默认事件:

return false

严格模式和正常模式的区别:

'use strict'

BOM:

ECMA

引用:

try catch 用法:

new Image();

=========================================

事件绑定

作用:给同一个元素加同一个事件加多次。

obj.addEventListener(sEv,fn,false);

兼容:IE9+,chrome,firefox

obj.attachEvent('on'+sEv,fn);

兼容:IE10-

事件流: 浏览器中事件的走向。

false 冒泡阶段  从下往上找相同事件

true 捕获阶段 从上往下找相同事件

只有addEventListener第三个参数为true时才会触发捕获

事件绑定兼容写法。

if(obj.addEventListener){

obj.addEventListener(sEv,fn,false);

}else{

obj.attachEvent('on'+sEv,fn);

}

解除事件绑定

obj.removeEventListener(sEv,fn,false);

兼容:IE9+,chrome,firefox

obj.detachEvent('on'+sEv,fn);

兼容:IE10-

解除事件绑定兼容写法。

if(obj.removeEventListener){

obj.removeEventListener(sEv,fn,false);

}else{

obj.detachEvent('on'+sEv,fn);

}

解除事件绑定,解除不了匿名函数

因为两个函数不想等

因为函数的真正写法是

new Function();

往后只要加事件就加上事件绑定

this的错误用法:

1.定时器中不能使用this

2.事件中套了一层函数

3.行间事件套了一层

4.attachEvent中不能使用this

DOM事件:

1.以DOM开头

2.只能使用事件绑定

window.onload              页面加载完毕

加载:css,html,js,图片等

domReady                      DOM结构加载完毕以后

doucment

DOMContentLoaded  dom结构加载完毕以后

必须绑定添加

只兼容高级浏览器(IE9,10,chrome,ff)

IE下想兼容模拟一个:

document.onreadystatechange    监控资源加载情况

document.readyState        资源此时情况

document.readyState=='complete' dom资源加载完毕

(这个是模拟加载)

事件委托:子元素的事件可以委托给父级(父级只是相对的)

委托:那事情交给别人

1.提高性能

2.给未来元素加事件

事件源:

oEvent.srcElement 兼容ie,chrome

oEvent.target 兼容高版本浏览器

兼容写法: var target=oEvent.srcElement||oEvent.target;

target.tagName==Li  tagName 判断点击的元素是大写

onmouseover

onmouseout    bug  移到子元素身上,也算移出了

onmouseenter:    进入了

解决onmosueover的bug

onmouseleave : 离开了

解决onmouseout的bug

在IE10下:

alert在里面移出2回

因为BOM浏览器对象模型的原因

用console.log()1回

你可能感兴趣的:(js学习笔记)