什么是事件对象？在触发DOM上的事件时都会产生一个对象
事件对象event
①DOM中的事件对象  属性
（1）、type属性用于获取事件类型
（2）、target属性用于获取事件目标
（3）、stopPropagation()方法 用于阻止事件冒泡
（4）、preventDefault() 方法 阻止事件的默认行为,例如<a href="#" ></a>如果一个div里面有一个button，button和div都绑定了click事件，如果是事件冒泡，那么点击button的时候，首先触发button的处理函数，然后触发div的处理函数。（由内而外）
如果有时候不想冒泡，也就是不希望div的事件被触发，那么需要阻止事件冒泡。stopPropagation()方法
如果需要阻止a标签的默认属性跳转，可以使用阻止事件的默认行为preventDefault()方法

事件处理程序：
1，HTML事件处理程序；
2，DOM0级事件处理程序；
3，DOM2级事件处理程序；（定义了两个方法：用于处理指定和删除事件处理程序的操作addEventListener()和removeEventListener()。他们都接受三个参数：要处理的事件名、作为事件处理程序的函数、布尔值）
4，IE事件处理程序；（attachEvent()添加事件，DetachEvent()删除事件。他们接受相同的两个参数：事件处理程序的名称和事件处理程序的函数）
5，跨浏览器的事件处理程序；

恰当的适用能力检测，即如果这个浏览器适合这个事件处理程序，就用这个，反之用另外的事件处理程序；

封装在一个对象内，把对象放在变量里面，即var eventuitil={..............这里面编写的是对象的方法};

.跨浏览器检测<br>
/*addEventLister兼容性*/<br>

var eventuitil={

    function addHandler(ele, type, handler) {
       if (ele.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本
           ele.addEventListener(type, handler, false);
       } else if (ele.attachEvent) { // IE 8 及更早版本
           ele.attachEvent("on" + type, handler);
       } else {
           ele["on" + type] = handler;<br>
       }
    }

}

eventuitil.addHandler(btn3,'click',showMes);//调用上面封装好的对象的方法

DOM2级事件处理程序

DOM2级事件处理程序

一、定义了两个方法：
addEventListener()添加事件
removeEventListener()移除事件
btn3.addEventListener('click',showMes,false);
三个参数设置：事件名称，处理方法(函数)，布尔值-----冒泡（false）或捕获（true）

二、注意：
1.事件名称全都不加on了，onclickclick——事件名称要加引号“”
2.处理方法中的函数只写函数名，不加括号——不加括号才是函数，加了括号是运行函数
3.false 兼容所有浏览器-----事件冒泡流——布尔值是不需要加引号“”的
4.通过addEventListener添加的事件只能通过removeEventListener来删除——参数要一样
btn.removeEventListener(参数);//参数必须和btn.addEventListener的一致，删除事件

三、其他
dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数，事件触发的时候会按照绑定顺序执行各个函数。
btn3.addEventListener('click',showMes,false);
btn3.addEventListener('click',showMes,function(){alert(this.value）;},false);
//不可以这样添加两个函数，怀疑其本意为：
//Btn3.addEventListener('click',showmessage1/function(){alert("这是匿名函数")},false);  

四、缺点：IE不支持该事件

DOM0级事件处理程序 （用得比较多）：先把元素取出来，然后为其属性添加一个事件的方法叫DOM0级处理程序。
它是一种较传统的方式：把一个函数赋值给一个事件处理程序的属性。
优点：简单，跨浏览器的优势
var btn2=document.getElementById("btn2");---先获取出元素，定义对象 //取得btn2按钮对象
btn2.onclick=function(){alert('这是通过DOM0级添加的事件！')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性

HTML事件处理程序(现在不建议使用了):事件直接加在HTML代码中
缺点：HTML和js代码高耦合，如果修改，就要修改两个地方--HTML元素内和script函数。

1.事件冒泡：事件由子元素获取并沿DOM树向上传播
2.事件捕获：事件由根元素获取并沿DOM树向下分发

本章内容
1、理解事件流
2、使用事件处理程序
3、不同的事件类型
一、事件流
事件流描述的是从页面中接受事件的顺序。
IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流
1、事件冒泡
事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。
2、事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。
二、事件处理程序
1、HTML事件处理程序
2、DOM0级事件处理程序
3、DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
4、IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数
5、跨浏览器的事件处理程序
三、事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target：事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement：事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为

键盘事件

2.在指定区域（整个QQ面板）按下——页面随光标移动，即页面的坐标与光标坐标一致——释放鼠标是停止移动

3.clientX与clentY能够获取鼠标的光标位置；onmousedown鼠标按下事件；移动要用到onmousemove事件，当鼠标指针在元素内部移动时重复的触发；clientX与clentY是event这个对象的属性，非ie用event,ie用window.event

QQ面板拖拽效果的制作

1. 在IE10之前的游览器不支持document.getElementByClassName()。因此为了解决游览器不兼容的问题，首先我们需要封装一个获取类名的方法（这个面板的样式大部分是用class写的）

2. 
   

IE中的事件对象

（非IE的事件对象用event，IE8之前用window.event)

事件对象

事件冒泡：由最具体的元素开始接受逐级向上冒泡到最不具体的元素

事件的默认行为：如a链接有个默认行为就是跳转

第二章：事件处理程序<br> 1.HTML事件处理程序：嵌入HTML<br> 2.DOM0事件处理程序：把函数赋值属性<br> 3.DOM2事件处理程序：addEventListener()和removeEventListner()参数：事件名、函数、布尔；<br>  element.removeEventLister()删除时需要相同的参数； 4.DOM0和DOM2级的优点：可以为同一个元素添加多个事件处理程序（HTML事件就不可以），这些事件处理程序会依次执行； 5.IE不支持DOM事件处理程序，拥有类似DOM的方法（IE和Opera支持）  attachEvent();事件名称、事件处理程序的函数  detachEvent(); 备注：IE事件处理函数attachEvent();detachEvent();参数：事件名称、函数，默认只支持冒泡；<br> 6.跨浏览器检测<br> /*addEventLister兼容性*/<br> function addHandler(ele, type, handler) {<br>    if (ele.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本<br>        ele.addEventListener(type, handler, false);<br>    } else if (ele.attachEvent) { // IE 8 及更早版本<br>        ele.attachEvent("on" + type, handler);<<br>    } else {<br><br>        ele["on" + type] = handler;<br>    }<br> }

跨游览器的事件处理程序的方法：能力检测，把所以有方法封装在一个对象内，判断你支持哪个方法。

即把添加事件和删除事件，封装到一个“对象”内。

//例子：给按钮添加点击事件    var eventUtil={        //添加句柄        addHandler: function (element, type, handler) {            if(element.addEventListener){    //判断能否适用dom 2级事件                element.addEventListener(type,handler,false);            }else if(element.attachEvent){           //判断能否适用IE事件                element.attachEvent('on'+type,handler);            }else{                element['on'+type]=hafnder;   //element.onclick===element['onclick']

                    //有些老版本的游览器前两种都不支持，所以用DOM0级事件处理方法            }

     //调用

    eventUtil.addHandler(but2,'click',showmess);

JS中，以下两点是等价的。 object.property===object[property]  //可以用 . 的地方都可以用[]代替

而变量和字符串作为对象的属性时，不能用.链接；这时候需要用到中括号[]