js中事件对象event

一、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]分别获取。