JS-笔记

=================
2017-3-16
=================
DOM
children 子级
parentNode 父级
childNodes 子级
tagName 标签名
第一个子节点
firstElementChild||firstChild
最后一个子节点
lastElementChild||lastChild
上一个兄弟节点
previousElementSibling||previosSibling
obj.children[0]
下一个兄弟节点
nextElementSibling||nextSibling
obj.children[obj.children.length-1]


创建
document.createElement(tagName);
插入
父级.appendChild(obj);
父级.insertBefore(obj,在谁之前);
删除
父级.removeChild(obj);
获取物体信息
obj.offsetLeft/Top 绝对距离
obj.offsetWidth/Height 盒子模型大小
盒子模型：padding+width/height+border
obj.offsetPearent 定位父级
绝对距离
obj.getBoundingClientRect().left/top/right/bottom


事件
onmousedown 鼠标按下
onmousemove 鼠标移动
onmouseup 鼠标抬起


事件对象
function (ev){
ev.clientX 鼠标距离页面的X
ev.clientY 鼠标距离页面的Y
}


阻止浏览器默认事件
return false;
---------------------------------------------------------
鼠标右键
oncontextmenu
双击事件
ondblclick
键盘事件
组合键
ctrlKey
shiftKey
altKey
事件冒泡
事件冒泡只看事件
父子级嵌套
事件相同
取消事件冒泡
ev.cancelBubble=true;


事件下沉/事件捕获
事件绑定（改变最后一个参数只为true）


事件绑定
obj.addEventListener('click',fn,false);
解决事件冲突


解除绑定
obj.removeEventListener('click',fn,false);
事件委托
自己的事情交给别人做
事件冒泡原理


事件加给父级
事件对象下面有一个事件源头
判断标签是否是子级,不是子级阻止掉


事件源
ev.srcElement


给未来元素加事件
可以省for循环


滚动事件
window.onscroll


获取滚动距离
document.body.scrollTop 高版本
document.documentElement.scrollTop 低版本


js加载顺序 window.onload
HTML+css+img+video+audio+flash+js


DOMContentLoaded
HTML+CSS+js img video ....


--------------------------------------------------
键盘移动div动
简易浏览板  回车 可以 提交
预加载