一、Event对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细信息（包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。）都会被临时保存到一个指定的地方——event对象，供我们在需要的时候调用
二、获取event对象
在 W3C 规范中，event 对象是随事件处理函数传入的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式；但是对于 IE8.0 及其以下版本，event 对象必须作为 window 对象的一个属性。
IE、Chrome：event是一个内置的全局对象
标准下/FF：事件对象是通过事件函数的第一个参数传入（如果一个函数是被事件调用的，那么这个函数定义的第一个参数就是事件对象）
如何处理兼容性：
document.onclick = function fn(){
var ev = ev||event;
alert('处理兼容');
}
例子：
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
document.onmousemove = function(ev){
var ev = ev||event;//处理兼容性
oDiv.style.left = ev.clientX + 'px';
oDiv.style.top = ev.clientY + 'px';
}
}
</script>
三、事件流
事件流是描述的从页面接受事件的顺序，当几个都具有事件的元素层叠在一起的时候而层叠在你点击范围 ， 并不是只有当前被点击的元素会触发事件 ， 那么你点击其中一个元素的所有元素都会触发事件。而如果我们想要只触发其中一个事件时，此时就需要取消冒泡或捕获。现代浏览器默认都是冒泡类型，所以通常只需要取消冒泡即可。
事件流包括两种模式：冒泡和捕获。
1、冒泡：从里向外逐个触发。当你使用事件冒泡时，子级元素先触发，父级元素后触发
事件冒泡机制：当一个元素接收到事件的时候，会把他接收的所有传播给他的父级，一直到顶层window
2、捕获：从外向里逐个触发（与事件冒泡机制相反）当你使用事件捕获时，父级元素先触发，子级元素后触发
W3C模型
W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。
阻止事件冒泡的方法
function stopBubble(e) {
if(e && e.stopPropagation){
e.stopPropagation(); //非IE下
} else {
window.event.cancelBubble = true; //IE下
}
};
四、js事件绑定
要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。
在JavaScript中，有三种常用的绑定事件的方法：
- 在DOM元素中直接绑定；
- 在JavaScript代码中绑定；
- 绑定事件监听函数。
1、在DOM中直接绑定
<button onclick="open()">按钮</button>
<script>
function open(){
alert(1)；
}
</script>
2、在js代码中绑定
<button id="btn">按钮</button>
document.getElementById('btn').onclick = function(){
this.style.background = 'yellow';
}
3、绑定事件监听函数
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
addEventListener()函数语法：
elementObject.addEventListener(eventName,handle,useCapture);
| 参数 |
说明 |
| elementObject |
DOM对象（即DOM元素）。 |
| eventName |
事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
|
| handle |
事件句柄函数，即用来处理事件的函数。 |
| useCapture |
Boolean类型，是否使用捕获，一般用false 。这里涉及到JavaScript事件流的概念，前面已经进行了讲解 |
attachEvent()函数语法：
elementObject.attachEvent(eventName,handle);
| 参数 |
说明 |
| elementObject |
DOM对象（即DOM元素）。 |
| eventName |
事件名称。注意，与addEventListener()不同，这里的事件名称有“ on ”，如鼠标单击事件 onclick ，鼠标双击事件 ondoubleclick ，鼠标移入事件 onmouseover，鼠标移出事件 onmouseout 等。
|
| handle |
事件句柄函数，即用来处理事件的函数。 |
注意：事件句柄函数是指“ 函数名 ”，不能带小括号。
addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；但是，IE8.0及其以下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。所以，这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码，进行了兼容性处理，能够被所有浏览器支持：
<button id="btn">按钮</button>
<script type="text/javascript">
var oBtn = document.getElementById('btn');
function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
}
addEvent(oBtn,'click',function(){//切记cliclk要加引号，没加会报错
this.style.width = 200+'px';
});
</script>
<span style="color:#ffcc33">这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句，避免浏览器出现错误提示。</span>
注意：obj.addEventListener('click',fn,true);(从外到里)//告诉Obj，如果有一个进去的事件触发了你，你就去执行fn这个函数 obj.addEventListeren('click',fn,false);(从里到外)//告诉Obj，如果有一个出去的事件触发了你，你就去执行fn这个函数
总结一下就是：如果最后一个布尔值参数是true，就表示，在捕获阶段调用事件处理程序，如果是false，就表示在冒泡阶段调用事件处理程序
4、三种绑定事件的区别
第一种方式：函数写在结构层里面。非常不好，使页面很混乱，行为与结构得不到分离。并且在DOM结构如果绑定两个 "onclick" 事件，只会执行第一个；
第二种方式：行为与结构开始分离。第二种绑定方式中只能给一个时间绑定一个处理函数，在脚本通过匿名函数的方式绑定的只会执行最后一个事件。
第三种方式：可以绑定多次同一个事件，且都会执行
1. <div id="btn" onclick="clickone()" onclick="clicktwo()"></div>
<script>
function clickone(){ alert("hello"); } //执行这个
function clicktwo(){ alert("world!"); }
</script>
2. <div id="btn"></div>
<script>
document.getElementById("btn").onclick = function（）{ alert("hello"); }
document.getElementById("btn").onclick = function（）{ alert("world"); } //执行这个
</script>
3. <div id="btn"></div>
<script>
document.getElementById("btn").addeventlistener("click",clickone,false);
function clickone(){ alert("hello"); } //先执行
document.getElementById("btn").addeventlistener("click",clicktwo,false);
function clicktwo(){ alert("world"); } //后执行
</script>
5、如何取消事件绑定
第一种方式：document.onclick = null;(针对第一和第二两种绑定方式)
第二种方式：obj.detachEvent(事件名称，事件函数);（针对非标准IE下的绑定方式）
第三种方式：obj.removeEventListener(事件名称，事件函数，是否捕获);（针对标准浏览器下的绑定方式）
五、js事件委托
事件委托：利用事件冒泡的特性，将里层的事件委托给外层事件，根据event对象的属性进行事件委托，改善性能。
使用事件委托能够避免对特定的每个节点添加事件监听器；事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。（事件委托看起来挺难理解，但是举个生活的例子。比如，有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。）
<ul id="ul-item">
<li class="item">item1</li>
<li class="item">item2</li>
<li class="item">item3</li>
<li class="item">item4</li>
</ul>
<script type="text/javascript">
function fn(){
var oUlItem = document.getElementById('ul-item');
oUlItem.addEventListener('click',show，false);//添加监听事件
function show(ev){
var ev = ev || window.event;
var src = ev.target||ev.srcElement;//兼容IE下和FF下以及其他浏览器
if(src && src.className.toLowerCase() === 'item'){//tolowerCase，将字符串全部转化为小写字母
alert(src.innerHTML);
}
}
};
fn();
</script>
以下为补充知识（js的event.srcElement与event.target(触发事件源)）
IE下,event对象有srcElement属性,但是没有target属性;
Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：
firefox 下的 event.target = IE 下的 event.srcElement
解决方法:使用obj = event.srcElement ? event.srcElement : event.target;
或：var evtTarget = event.target || event.srcElement;
js将html的所有控件都看成是一个个对象，通过js的各个属性，就能对其进行操作处理，js里对象的整体结构是树形的结构。一层一层的追溯，即可获取需要的结果。
event.srcElement：表示的当前的这个事件源。
event.srcElement.parentNode：表示当前事件源的父节点。
parentNode：父节点，也就是上一层的节点。可以是任何一个标签。
event.srcElement.firstChild：当前事件的第一个节点，如果节点是input，通过event.srcElement.firstChild.value就可以获取此input的值。
event.srcElement.parentElement：是指在鼠标所在对象的上一个对象。
event.srcElement.children：当前节点下对象的个数，有多个的话就是个数组，如当前节点下有2个input的对象，要获取这两个可以用event.srcElement.children[0] 与 event.srcElement.children[1]分别获取。
