javaScript DOM - document 获取元素的方式，document 事件的三要素，事件的绑定与删除方式，常用事件，常用事件内置对象属性，事件流，事件方法中this与event.target的区别

获取元素：

1.document 获取元素的方式

getElementById	通过Id名获取	返回对象
getElementsByTagName	通过标签名获取	返回数组
getElementsByClassName	通过类名获取	返回数组
querySelector	通过选择器获取该选择器的第一个元素对象；	返回对象
querySelectorAll	通过选择器获取该选择器所有的元素对象	返回数组
document.body	专门获取body元素	返回对象
document.documentElement	专门获取html元素	返回对象

 

事件：

1.事件的三要素：事件源，事件类型，事件处理程序

 

2.事件的绑定与删除方式

var doc=document.querySelector("div");
//方式1 绑定
doc.onclick=function (event) {
  
}
//删除
doc.onclick = null;

//方式2 绑定
doc.addEventListener("click",move)
function move(event){
  
}
//删除
doc.removeEventListener("click",move)

 

3.常用事件

事件	描述
onclick	点击鼠标时触发此事件
onmouseover	当鼠标移动到某个元素上方时触发此事件
onmousemove	移动鼠标时触发此事件
onmouseout	当鼠标离开某个元素范围时触发此事件
onkeydown	当按下键盘上的某个按键时触发此事件
onload	页面内容加载完成时触发此事件

 

4.常用事件的内置对象属性

属性	描述
type	事件的类型，如onlick中的click
srcElement与target	返回触发事件的对象
button	声明被按下的鼠标键，1代表左键，2代表右键，4代表中键，如果按下多个键，就把这些值加起来，所以3就代表左右键同时按下（firefox中 0代表左键，1代表中间键，2代表右键）
keyCode	返回keydown何keyup事件发生的时候按键的代码，以及keypress 事件的Unicode字符；(firefox2不支持 event.keycode，可以用 event.which替代 )
cancelBubble 阻止事件的冒泡行为	一个布尔属性，把它设置为true的时候，将停止事件进一步起泡到包容层次的元素；(e.cancelBubble = true; 相当于 e.stopPropagation();)
returnValue 阻止事件的默认行为	一个布尔属性，设置为false的时候可以组织浏览器执行默认的事件动作；(e.returnValue = false; 相当于 e.preventDefault();)

 

5.事件流

js中的事件要么是捕获阶段，要么是冒泡阶段，这两种状态：

捕获阶段事件方法从上往下依次执行，冒泡阶段事件方法从下往上依次执行

addEventListener默认为false，事件流默认为冒泡阶段；当addEventListener设置为true时，事件流为捕获阶段

 

6.事件方法中this与event.target的区别

e.target 返回的是触发事件的对象(元素)

this 返回的是绑定事件的对象(元素)