使用事件处理程序有：

1. HTML事件处理程序；

2. DOM0级事件处理程序：可以添加多个事件处理程序

3. DOM2级事件处理程序：2级事件定义了两个方法addEventListener()和removeEventListener()，有三个参数：要处理的事件名（不加on）、事件处理程序的函数、布尔值（true表示捕获false表示冒泡）；可以添加多个事件处理程序，按顺序执行多个，删除要指定添加时相同的参数

DOM2级事件处理程序，addEventListener()和removeEventListener()有三个参数：要处理的事件名、作为事件处理程序的函数和布尔值。布尔值true：在捕获阶段调用事件处理程序。false：在冒泡阶段调用事件处理程序

布尔值--false：表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器)，一般设为false；true表示在捕获阶段调用事件处理程序

《JavaScript高级程序设计》中讲了，DOM0级对每个事件只支持一个事件处理程序，这也正是DOM2级相对DOM0级的好处，即DOM2级对每个事件支持多个事件处理程序。

布尔值：true:捕获级   false：冒泡级

this关键字可以 引用被触发的元素

DOM 0级，2级  可以在一个按钮上添加多个事件处理程序。

DOM 2级事件

btn3.addEventListener('事件 eg：click'，调用的函数，布尔值);
//addEventListener方法给这个元素添加事件监听程序  
事件都要去掉on
布尔值 false 兼容各种浏览器

通过addEventListener添加的事件只能通过removeEventListener
方法删除事件 参数与添加时相同

1、对于HTML事件来说，只能添加一个事件程序，且与JS的耦合过密，不利于后期的维护。

2、对于DOM0级事件，可以添加多个事件程序，但是只会执行最后一个事件。

3、对于DOM2级事件，同样可以添加多个事件程序，并且从上到下按顺序执行

DOM2级事件定义了两个方法：

        用于处理指定和删除事件程序的操作，addEventListener（）和removeEventListener（）。

        这两个方法都需要接收三个参数：

            - 要处理的事件名

            - 作为事件处理程序的函数

            -  布尔值（true：捕获法，false：冒泡法）。

添加事件处理程序 addEventListener(要处理的事件名，作为事件处理程序的函数，bool)

三种事件处理

1、对于HTML事件来说，只能添加一个事件程序，且与JS的耦合过密，不利于后期的维护。

2、对于DOM0级事件，可以添加多个事件程序，但是只会执行最后一个事件。

3、对于DOM2级事件，同样可以添加多个事件程序，并且从上到下按顺序执行

  DOM2级事件定义了两个方法：

        用于处理指定和删除事件程序的操作，addEventListener（）和removeEventListener（）。

        接收三个参数：要处理的事件名、作为事件处理程序的函数和  布尔值（true：捕获法，false：冒泡法）。

 addListener(element(给哪个元素添加事件),hander(触发该事件执行什么操作、方法),true/false (true 捕获阶段触发 false 冒泡阶段触发))

注意：添加事件的时候 所有 onload onclick onfoucs 中的“on” 都去掉 Dom2事件处理程序 不识别带有“on” 的事件

DOM2级事件处理程序

DOM2级事件定义了两个方法：

用于处理指定和删除事件处理程序的操作

addEventListener()和removeEventListener()

接收三个参数：要处理的事件名，作为事件处理程序的函数和布尔值

true：捕获阶段

false: 冒泡阶段

部分笔记内容

this用法,引用被触发(事件)的元素.

HTML事件处理程序

DOM0级事件处理程序domcument.getElementByid('id').onclick=function

Dom2级事件处理程序

addEventListener('click', function, false)

removeEventListener('click', function)

DOM2 级事件处理程序

DOM2 级事件定义了两个方法：

• 处理指定事件处理程序的操作：addEventListener()

• 删除事件处理程序的操作：removeEventListener()

接收三个参数：

• 要处理的事件名

• 作为事件处理程序的函数

• 布尔值

1 HTML 事件处理程序

2 DOM 0级事件处理程序   

3 DOM 2级事件处理程序

   dom 2级事件定义了两个方法：

     用于处理指定和删除事件处理程序的操作

   addEventListener()和removeEventListner（）；

接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值

DOM2级事件：可添加多个动作，属性中要处理的事件名：去掉on（例：点击事件onclick写click）

removeEventListener()的属性必须与addEventListener()的属性一样。

removeEventListener（）中false：兼容各种浏览器

DOM2级事件处理程序：

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不支持该事件

在一个按钮上添加多个事件处理程序

通过addEventListener的事件只能通过removeEventListener来删除

  三种事件处理

1、对于HTML事件来说，只能添加一个事件程序，且与JS的耦合过密，不利于后期的维护。

2、对于DOM0级事件，可以添加多个事件程序，但是只会执行最后一个事件。

3、对于DOM2级事件，同样可以添加多个事件程序，并且从上到下按顺序执行

  DOM2级事件定义了两个方法：

        用于处理指定和删除事件程序的操作，addEventListener（）和removeEventListener（）。

        接收三个参数：要处理的事件名、作为事件处理程序的函数和  布尔值（true：捕获法，false：冒泡法）。

事件处理程序

1. HTML添加事件处理

2. JS获取元素，添加事件处理

3. addEventListener(),removeEventListener,通过监听元素触发事件处理，需要三个参数，事件名，事件处理函数。布尔值（true：捕获法，false：冒泡法）
   

this引用被触发的元素：