event(事件)对象
1、定义：用来记录一些事件发生时的相关信息的对象
事件是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键，
事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小等。
2、特点
1. 只有当事件发生的时候才产生，只能在处理函数内部访问
2. 处理函数运行结束后自动销毁。
3、事件源
概念：发生事件的DOM节点（HTML元素）。
不管在哪个事件中，只要你操作的那个元素就是事件源。
获取事件源的方式：
var event=event.target||window.SrcElement;//兼容IE浏览器
4、 事件兼容：
var ev = ev || window.event; //兼容IE
如果不做兼容，在IE浏览器中事件不会被执行，浏览器没有任何反应
5、事件各种方法和属性
* event.stopPropagation()：终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。
调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点
阻止冒泡事件兼容写法
function stopBubble(event) {
//如果提供了事件对象，则这是一个非IE浏览器
if (event.stopPropagation) { //因此它支持W3C的 stopPropagation()方法
event.stopPropagation();
}
else { //否则，我们需要使用IE的方式来取消事件冒泡
event.cancelBubble = true;
}
}
* event.preventDefault() ：取消事件的默认动作
默认事件：html元素默认的行为。
比如a标签，点击后有跳转动作；
form表单中的submit类型的input有一个默认提交跳转事件；
reset类型的input有重置表单行为。
阻止默认事件的方式：
1) return false; //HTML、DOM0级
2) event.preventDefault(); // W3C
3) event.returnValue = false; //IE
兼容写法：
if (event.preventDefault) {
event.preventDefault(); //w3c
}else{
event.returnValue = false; //兼容IE
}
小试牛刀 ：
<a href = "a.html" onclick="function(event)">点一下</a>
<script type = "text/javascript">
funtion clickA (a){
alert("点下试试");
a.preventDefault(); //当点击超链接按钮时，页面会弹出提示对话框，而不会跳转
}
</script>
* event.clientX、event.clientY：鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标）左间距与上间距
可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
* event.screenX、event.screenY：鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
* event.keyCode：获得按键的code值。通过keyCode获得键盘编码值，可以知道我们点击了哪个键。
* event.type: 获取事件类型。
* event.button; 返回鼠标按键 0 1 2 即左中右
* event.offsetX 、event.offsetY : 鼠标在元素x轴、y轴上的距离
6、事件流
事件流描述的是从页面中接受事件的顺序。
事件冒泡：事件开始时由最具体的元素(事件源)接受，然后逐级向上传播到较为不具体的节点(顶层对象)
<input>→<div>→<body>→<html>→document
事件捕获： 不太具体的DOM节点(顶层对象)开始接收到事件，逐级向下到最具体的节点(事件源)最后接收到事件。
document→<html>→<body>→<div>→<input>
7、事件委托
事件：通俗的讲，事件就是onclick，onmouseover，onmouseout等就是事件
事件委托 : 利用事件冒泡机制指定一个事件处理程序，来管理某一类型的所有事件
即：利用冒泡的原理，把事件加到父级上，触发执行效果。
优点：1) 只在内存中开辟了一块空间，节省资源的同时减少了DOM操作 ，提高性能
2) 对于新添加的元素也会有之前的事件(可以把事件绑定给未来元素)
普通事件与事件委托案例如下：
<style>
#ulist>li{
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
margin-top: 5px;
list-style: none;
background-color: #ADD8E6;
}
</style>
<ul id="ulist">
<li class="list1"></li>
<li class="list2"></li>
</ul>
<script type="text/javascript">
// 1、普通事件绑定的方式
var ulist = document.getElementById("ulist");
var lis = ulist.children;
for(var i = 0 ; i < lis.length ; i++){
lis[i].index=i;
lis[i].onmouseover = function(ev){
//对浏览器做兼容(W3C||IE)
var ev = ev || window.event;
lis[this.index].style.backgroundColor = "red";
}
lis[i].onmouseout = function(ev){
var ev = ev || window.event;
lis[this.index].style.backgroundColor = "";
}
}
//2、事件委托的方式
var ulist = document.getElementById("ulist");
var count = 1;//初始化变量count，记录点击次数
//给多个元素同时绑定相同的功能
ulist.addEventListener("click",function(ev){
var tar = ev.target ;//获取事件源
clickFirst();
clickSecond();
function clickFirst(){
if(tar.id == "list1"){
tar.style.cursor = "pointer";
tar.innerHTML = "第一个li被你点击了"+"<span style = 'color:red'>"+count+"<span/>"+"次";
count++;
}
}
function clickSecond(){
if(tar.id=="list2"){
tar.style.backgroundColor = "red";
}
}
});
</script>
8、事件处理
事件有DOM0, D2的区分。
1）DOM0级事件处理程序 即为指定对象添加事件处理
<input id="btn" value="按钮" type="button">
<script>
var btn= document.getElementById("btn");
btn.onclick=function(){
alert("DOM0级添加事件处理");
}
btn.onclick=null;//如果想要删除btn的点击事件，将其置为null即可
</script>
2) DOM2是通过addEventListener 绑定/监听 事件
* 两个方法：添加事件处理程序方法addEventListener()和移除事件处理程序方法removeEventListener()
* 所有DOM节点中都包含这两个方法，并且它们都接受3个参数
* 第一个参数是要处理的事件名(如click)，第二个参数是处理事件的函数, 一个布尔值。
* 第三个参数如果是true,表示在捕获阶段调用事件处理函数，默认是fasle,表示在冒泡阶段调用事件处理函数。
* 事件监听和普通事件的区别：
1）添加监听事件可以对动态生成的元素（未来元素）生效。而普通事件不可以。
2）普通事件只能给元素相同类型的事件绑定一个，如果绑定相同的第二个，会将上一个覆盖，
监听事件可以添加n个（事件监听可以绑定多个相同的事件)
3）事件监听可以改变事件的传播方式冒泡或者捕获，而事件绑定只有冒泡
4）事件监听有删除方法removeEventListener()，而普通事件监听只能通过设为null 删除
* 使用DOM2级事件处理程序的优点：
可以为元素添加多个事件处理程序。事件处理程序会按照添加它们的顺序触发。
注意：
a . 这里我们的第三个参数都是false,是在冒泡阶段添加的。
大多情况下，都是就事件处理程序添加到事件流的冒泡阶段，这样可以 最大限度的兼容各种浏览器。
b. 通过addEventListener()添加的事件处理程序只能使用removeEventListener()来移除，
移除时传入的参数与添加时使用的参数相同。
c . 通过addEventListener()添加的匿名函数将无法移除。
<style type="text/css">
#test{
width: 100px;
height: 100px;
background-color: #ADD6DA;
}
</style>
</head>
<body>
<div class="" id="test"></div>
<script type="text/javascript">
var test = document.getElementById("test");
test.addEventListener("click", clickFun,false); //addEventListener()添加事件处理函数
function clickFun(){
alert("DOM2事件添加");
}
test.removeEventListener("click",clickFun,false); //removeEventListener()清除事件
//如下，通过addEventListener()添加的处理事件的匿名函数，是无法通过removeEventListener()删除的
//test.removeEventListener("click",function(){ alert("DOM2事件清除");}, false);
</script>
