js event事件对象概括

　　事件是用户或者浏览器自身执行的动作，而响应某个事件的函数就叫做事件处理程序或者叫事件侦听器。

定义事件处理程序可以大致分为以下三种：

一、html事件处理程序

　　元素支持的每种事件都可以用一个与之对应的事件处理程序的同名html特性来指定。

 <input type="button"  id="demo" onclick="alert(this.id)">

　　这种方式创建的事件处理程序，里面有包含一个局部变量event，就是事件对象，在这个函数内部this等于事件的目标元素。且这个函数扩展了其作用域，可以像访问局部变量一样访问document和该元素的本身的属性成员。

　　在html中指定事件处理程序的方式让html和js代码紧密耦合，不易维护。不推荐使用。

二、dom元素方法

　　通过js指定事件处理方式由来已久。方式就是将一个函数赋值给一个事件处理程序属性。

<div id="demo" class="hh">Web</div>
<script>
 　var demo=document.getElementById("demo");
　　 　demo.onclick=function(){alert(this.className);} // alert(this.childNodes[0].nodeValue);输出web
</script>

　　我们看到在上面的函数中可以通过this访问元素的任何属性和方法。

　　将事件处理程序属性的值设为null可以删除它。

 demo.onclick=null;

三、addEventListener() / removeEventListener()方法

　　所有DOM都包含这二个方法，ie6-8 不支持这个方法。这个方法接受三个参数：要处理的事件名称，事件处理程序和一个表示事件捕获或者冒泡的布尔值。

<div id="demo" class="ppp">Web</div>
<script>
 var demo=document.getElementById("demo");
 　　demo.addEventListener("click",function(){alert(this.childNodes[0].nodeValue);},false);//false表示冒泡阶段调用函数
 </script>

　　该方法好处是可以为元素添加多个事件处理程序：

<div id="demo" class="ppp">Web</div>
<script>
 var demo=document.getElementById("demo");
　　 demo.addEventListener("click",function(){alert(this.childNodes[0].nodeValue);},false);
 　　demo.addEventListener("click",function(){alert(this.className);},false);
 </script>

　　为div元素添加二个事件处理程序，点击后会按照添加的顺序依次弹出二条警示框。

　　通过为removeEventListener()方法提供与添加处理程序相同的参数可以删除事件处理程序。

　　function a(){alert(this.childNodes[0].nodeValue);};
　　demo.addEventListener("click",a,false);
　　demo.removeEventListener("click",a,false);

　　ie有它自己的事件处理程序方法：attachEvent()和detachEvent()。这个方法只接受二个参数，因为ie8之前只支持事件冒泡，所以没有像addEventListener()方法中的第三个参数。这二个参数分别是：事件处理程序名称和事件处理程序函数。

<div id="demo" class="ppp">Web</div>
<script>
 var demo=document.getElementById("demo");
　　 function a(){alert("hi");};
　　 demo.attachEvent("onclick",a);//第一个参数是"onclick" 不是"click"
 </script>
 

　　 ie以attachEvent()方法运行的方式与上面addEventListener()方法运行的主要区别是事件的处理程序的作用域不同。

　　在addEventListener()方法中程序是在所属的元素作用域中运行的；而ie的attachEvent()方法中程序是在全局作用域里运行的，它的this等于window。

事件对象

　　在触发DOM上的某个事件时会产生一个事件对象event，这个对象包含所有与事件有关的信息。包括鼠标点击的位置，键盘按下的键码、类型等等。

DOM事件对象event中包含的一些共有的属性和方法：

target：表示事件的目标。只读

type：表示事件触发的类型。只读

bubbles：表示事件是否冒泡。只读

cancelable：表示是否可以取消事件默认行为。只读

currentTarget：表示其事件监听器处理该事件的元素。

eventPhase：表示事件传播的当前阶段。（1表示捕获，2表示处于目标阶段，3表示冒泡）只读

preventDefault()方法：取消事件的默认行为。当cancelable值为true时可调用这个方法。只读

stopPropagation()方法：取消事件的进一步捕获或者冒泡，同时阻止任何事件处理程序被调用。只读

　　在dom事件处理程序中this始终等于currentTarget的值；而target则包含事件的实际目标。如何将事件处理程序直接指定给目标元素则这三个值相等。

ie中的事件对象

ie中的event对象同样也包含与创建它的事件相关的属性和方法。

cancelBubble：表示是否取消事件冒泡，默认值为false。与上面DOM事件中的stopPropagation()方法作用相同。读写

returnValue：默认为true，设置为false表示取消事件的默认行为。与上面DOM事件中的preventDefalut()方法作用相同。读写

srcElement：表示事件的目标。与上面DOM事件中的targe属性作用相同。只读

type：表示事件的类型

ie中的event对象一般作为window对象的一个属性存在的，我们通过window.event来取得event对象。

事件类型

load事件：页面完全加载后在windows上触发；或图像完全加载后在<img>元素上触发。

unload事件：当页面完全卸载后在window上触发。

resize事件：当窗口发生大小变化时在window上触发。

scroll事件：滚动带有滚动条的元素中的内容的时候在该元素上触发。

select事件：当选择文本框中的一个或多个字符时触发。

blur事件：表示在元素失去焦点是触发。这个事件不会冒泡。

focus事件：表示在元素获得焦点时触发。也不会冒泡。

click事件：点击鼠标时触发。或者按下回车键触发。

dbclick事件：双击鼠标按钮时触发。

mouseover事件：鼠标移到元素上时触发。

mouseout事件：鼠标从元素上移出是触发。

mouedown事件：鼠标被按下时触发。

mousemove事件：鼠标在元素内部移动时重复地触发。

mouseup事件：释放鼠标按钮时触发。

clientX、clientY属性：鼠标事件中，这二个属性保存这鼠标位置的信息，他们的值分别表示事件发生时鼠标指针在视口中的水平和垂直坐标。这二个值不包括页面滚动的距离。

pageX、pageY属性：这二个属性表示鼠标光标在页面中的位置，而非从视口的左边和顶部算起。有滚动的距离的话还会算上滚动距离，页面没有滚动的话，它的值和上面的clientX、clientY的值相等。

screenX 、screenY属性：鼠标指针相对于整个屏幕的水平和垂直坐标。

shiftkey、ctrlkey、altkey和metakey这四个属性分别表示键盘上Shift、Ctrl、Alt、Meta是否被按下。这些属性包含的都是布尔值，true表示被按下。

keydown事件：按下键盘任意键时触发。

keypress事件：按下键盘上的字符键时触发。

keyup事件：释放键盘上的键时触发。

上面的keydown、keyup事件在发生时，event对象的keyCode属性保存这键盘上一个特定的键上的一个代码，称为键码。

在使用removeChild()或者replaceChlid()方法从DOM中删除节点的时候首先会触发DOMNodeRemoved事件。这里的event.target引用的是被删除的节点，event.relatedNode引用的是目标节点的父节点。这个事件可以冒泡。紧接着触发的是DOMSubtreeModified事件。这个事件的目标是被移除节点的父节点。event不再提供事件的相关信息。

在使用appendChild()、replaceChild()或inserBefore()来向DOM中插入节点时首先会触发DOMNodeInserted事件。这个事件的目标是被插入的节点。而event.relatedNode引用的父节点。紧接着会在新插入的节点上触发DOMNodeInsertedIntoDocument事件，这个事件不冒泡。最后一个触发的是DOMSubtreeModified。触发于新插入节点的父节点。

hashchange事件：URL发生变化是调用，一般将它添加给window对象。