获取元素

根据dom id获取     element.getElementById()　　　　返回DOM Element对象

根据标签名获取　　element.getElementsByTageName()　　返回带有指定标签名的对象集合

根据类名获取　　element.getElementsByClassName() 　　返回带有类名的对象集合

HTML5

document.querySelector("CSS选择器字符串")    返回指定选择器的第一个元素对象

document.querySelectorAll()　　　　返回知道选择器的所有对象集合

document.body　　获取body元素

document.documentElement　　　　获取html元素

node.parentNode　　获取父元素节点

node.children　　获取子元素节点集合

node.previousSubling　　获取上一个兄弟节点节点

node.nextSubling　　获取下一个兄弟元素节点

 

DOM

添加事件

node.onclick = function(){}

node.addEventListener('click',fn)　　IE9++

node.attachEvent('onclick',fn)　　　  --IE9

移除事件

node.onclick = null

node.removeEventListener('click',fn)

node.dettachEvent('onclick',fn)

DOM事件流分为3个阶段： 

事件流描述的是从页面接收事件的顺序

1.捕获阶段

2.当前目标阶段

3.冒泡阶段

注意

1.JS中只能执行冒泡或捕获阶段其中的一个阶段

2.onclick和attacheEvent只能得到冒泡阶段

3.addEventListener（type,fn,[boolean]）第三个参数默认为false,代表冒泡阶段调用事件处理程序，如果为true则为捕获阶段调用事件处理程序

4.实际开发中很少使用事件捕获，我们更关注冒泡事件。

5.有些事件是没有冒泡的，不如onblur,onfcous,onmouseover,onmouseout。

 

e.target和this的区别：

e.target是当前触发事件的对象,this是事件绑定的对象

阻止事件默认行为

e.preventDefault();　　//IE9+

e.returnValue;   //IE678

return false;　　//没有兼容性

阻止事件冒泡

e.stopPropagation()　　　//IE9+　

e.cancelBubble = true;　　//IE678

禁止选文字和禁止右击菜单

document.addEventListener("contentmenu",function(e){　　//禁止右击菜单

e.preventDefault();

})

document.addEventListener("selectstart",function(e){　　//禁止选中文字

e.preventDefault();

})

 

鼠标事件对象

e.clientX/clientY　　返回鼠标相对于浏览器窗口可视区域的X/Y坐标

e.pageX/pageY　　返回鼠标相对于文档页面的X/Y坐标 IE9+

e.screenX/screenY　　返回鼠标相当于电脑屏幕的X/Y坐标

 

 

 常用键盘事件

onkeyup　　某个键盘按键被松开时触发

onkeydown　　某个按键被按下时触发

onkeypress　　某个按键被按下时触发但是它不识别功能键（比如ctrl shift 箭头等）

三个事件的执行顺序  onkeydown  onkypress  onkeyup