事件

1.什么是事件

事件分为2部分：

a) 行为本身：浏览器天生就赋予其的行为

onclick,onmouseover,onscroll,onresize,onfocus,onkeydown等

哪怕我没有给上述行为绑定方法，事件也是存在的，当我们点击这个盒子的时候，同样会触发它的onclick行为，只是什么事情都没做而已

b) 事件绑定：给元素的某一个行为绑定方法

var oDiv = document.getElementById("div1");

//DOM0级事件绑定
oDiv.οnclick= function(){ //onclick这个行为定义在当前元素的私有属性上
//当我们触发oDiv的click行为的时候，会把绑定的这个函数执行
}

//DOM2级事件绑定
oDiv.addEventListener("click",function(){ //addEventListener这个属性是定义在当前元素所属EventTarget这个类的原型上的
console.log("ok");
},false);

2.事件对象

var oDiv = document.getElementById("div1");

我们把匿名函数定义的部分当做一个值付给oDiv的点击行为（函数表达式）

当我们触发#div1的点击行为的时候，会执行对应绑定上的方法

注意：

不仅仅把绑定的方法执行了，而且浏览器还默认的给这个方法传递了一个参数值：MouseEvent（鼠标事件对象）

1) 它是一个对象数据类型值，里面包含了很多的属性名和属性值，这些都是用来记录当前鼠标的相关信息的

2) MouseEvent —>UIEvent —> Event —> Object

3) MouseEvent记录的是页面中唯一一个鼠标每一次触发时候的相关信息，和到底是在哪个元素上触发的没有关系

oDiv.onclick = function(){
console.dir(arguments);
};
document.body.onclick = function(){
console.dir(e);
}

3.常用属性及兼容

关于事件对象MouseEvent的兼容问题

● 事件对象本身的获取存在兼容问题

 e = e || window.event;

标准浏览器中是浏览器给方法传递的参数，我们只需要定义形参e就可以获取到；

在ie6~8中浏览器不会给方法传递参数，我们如果需要的话，需要到window.event中获取查找

● 事件源

e.target = e.target || e.srcElement;

事件源，当前鼠标触发的是哪个元素，那么它存储的就是哪个元素，在ie6~8中不存在这个属性（e.target值是undefined），使用e.srcElement来获取

● e.type

存储的是当前鼠标触发的行为类型

● e.clientX / e.clientY

当前鼠标触发点距离当前屏幕（可视区域）左上角的x/y轴的坐标值

● e.pageX / e.pageY

当前鼠标触发点距离body左上角（页面第一屏最左端）的x/y轴的坐标，Ie6~8不兼容

通过使用clientY+滚动条卷去的高度来获取

e.pageX = e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
e.pageY = e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));

● e.preventDefault

阻止浏览器的默认行为

◆ 在ie6~8中没有这个方法，我们需要使用e.returnValue = false;代替

   e.preventDefault ? e.preventDefault() : e.returnValue = false;

◆ return false;

    和上述代码都是在阻止默认行为

◆ 对于a标签的阻止默认行为，还可以在html标签中进行：

 <a href=”javascript:;”></a>
 <a href=”javascript:void(0);”></a>
 <a href=”javascript:void(1);”></a>

● e.stopPropagation

阻止事件冒泡传播，ie6~8不兼容

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;

● e.keycode

◆ 空格键32

◆ 回退键8

◆ 回车键13

◆ 删除键46

◆ 四个方向键：左37 上38 右39 下40

document.body.onkeyup = function(e){
e = e || window.event;
console.log(e.keycode);
}

4.事件传播机制

事件的默认传播机制：

● 捕获阶段:从外向内依次查找元素

● 目标阶段：当前事件源本身的操作

● 冒泡阶段：从内到外依次触发相关的行为（最常用）

4.1 DOM0级——冒泡阶段

使用DOM0级事件绑定给元素的某一个行为绑定的方法，都是在行为触发后的冒泡阶段把方法执行的。

当前元素click行为触发时，它所有父级元素的click行为也会被触发，如果父级有click方法则执行，没有则无操作

<div class=”outer”>
<div class=”inner”>
<div class=”center”></div>
</div>
</div>

4.2 DOM2级——可控制在冒泡/捕获阶段发生

addEventListener(event,function,useCapture)

● useCapture：控制在哪个阶段发生

true：捕获阶段发生

false：冒泡阶段发生(默认)

5.事件委托/事件代理

利用事件的冒泡传播机制（触发当前元素的某个行为，它父级所有元素的相关行为都会被触发），如果一个容器中有很多元素都要绑定点击事件，我们没必要一个个的绑定，只需要给最外层容器绑定一个点击事件即可，在这个方法执行的时候，通过事件源的区分来进行不同的操作。

document.body.onclick = function(e){
e = e || window.event;
e.target = e.target || e.srcElement;//事件源
console.log(e.target);
}

6.window.onload,$(function(){})区别

window.onload = function(){}	

当页面中的所有资源 都加载完成（html结构、图片、音视频...）才会执行后面的函数；
并且在 一个页面中只能用一次，后面再写会把前面的覆盖掉，
得出：它是 采用DOM0事件绑定，所以只能绑定一次
window.addEventListener("load",function(){},false);
window.addEventListener("load",function(){},false); //如此可以绑定多次

jQuery:$(document).ready(function(){}) / $(function(){})

只要当页面中的 html结构（不包含图片、音视频等）加载完成就会执行对应的函数；
并且在同一个页面中 可以出现多次
得出：此方法为 DOM2事件绑定
并且绑定的行为的DOM2中新增加的那个DOMContentLoaded