事件基础

事件类型：

　　系统派发事件、自定义派发事件 :  系统派发的事件字符串是固定的，自定义派发的事件，字符串可以任意

　　EventTarget、 Event:   自定义一个Object对象不能添加事件，只有继承自EventTarget类的对象才可以添加事件，这个对象角事件目标对象，Event实例化的对象叫事件对象，他是用来给事件目标对象派发事件的。我在用系统自带的事件时，系统自动创建该对象，去派发事件。

事件传输基础：

　　1、事件目标对象注册侦听事件     2、向事件目标对象派发事件对象

 1     var target=new EventTarget();
 2     //  创建事件目标对象
 3     target.addEventListener("chilema",clickHandler);
 4     //  注册事件侦听
 5     var evt=new Event("chilema");
 6     //  创建事件对象
 7     evt.num=10;
 8     //  给事件对象添加属性num =10
 9     target.dispatchEvent(evt);
10     //  派发事件
11     function clickHandler(e){
12            console.log(e.num);
13     }
14     //  触发事件执行该函数

 

事件原理三阶段：

　　　　捕获             目标              冒泡
                外          到达目标              内
                 |                                         |
                内                                      外

 

事件监听方式：

　　addEventListener()  三个参数：事件类型，触发事件执行的函数， 第三个参数： 是否在捕获阶段执行 为boolean 或者 {once,true} 只执行一次 。 低版本浏览器不能用

　　onClick()类似方式， 支持低版本。

　　attachEvent()  两个参数： 事件类型，触发执行的函数  只有IE8及以下兼容

 

移除事件方法：

　　elem.removeEventListener()  

　　elem.onclick = null;

　　elem.detachEvent();

　　三种方法都是用移除事件和侦听事件的，但是三种方法传入的事件类型名称有差异： addEventListener()出入事件不加on,onclick()不传入参数，detachEvent()加on后面类型不大写。

 

阻止事件冒泡：

　　addEventListener()中：   e.stopProagation();

　　onClick()中：  return false;

　　attachEvent()中： e.cancelBubble = true;

 

 阻止事件默认行为：

　　e.preventDefault()。 不是所有情况都适用

 

事件委托：

　　如果给ul下的每个li添加事件，添加多个事件侦听是需要内存的，如果给ul添加事件侦听，给点击的li做处理，这样代码就会强上不少。

 

区分  e.currentTarget 、e.target :

　　currentTarget是事件目标对象，谁添加了这个事件侦听，该对象就是谁

　　target是实际点击的对象

　　e是触发了具体那种事件，e就是谁，e除了这些对象外，还有很多属性。