javascript 事件处理程序

事件冒泡：事件在文档树上向上传播，如有以下结构
```
<html> <body> <div>  <input type="button"/> </div> </body></html>
```

当用户点击按钮时，首先在按钮上触发点击事件，接着在包着按钮的div上触发点击事件，然后是body......

事件捕获：在文档树上向下传播，从外层到里层，与时间冒泡传播顺序正好相反。在容器上注册的时间处理程序有机会在事件传播到真实的目标之间捕获它。IE8及以下版本不支持事件捕获。

一 DOM事件

1 HTML事件
缺点：耦合程度高，更改js代码时常常需要修改html里的代码
如：

<input type="button"/ onclick="showMes()"><script> function showMes(){alert("hello world") }</script>

2 DOM0级事件
如：

var btn=document.getElementById（"btn"）;btn.onclick=function(){...}

缺点：每个事件目标对于每个特定类型都只能有一种事件处理程序
3 DOM2级事件
addEventListener()
removeEventListener()
上面两个方法都是传入三个参数

事件类型如click mouseover 注意不用加on
事件函数
布尔值一般为false true 表示函数将注册为捕获事件处理函数，并在事件的不同调度阶段调用
支持DOM事件的浏览器有：Chrome，火狐等
<code>
btn.addEventListener("click",showMes,false)
</code>

二 IE事件

提供如下两个方法

1 attachEvent() 添加事件

2 detachEvent() 删除时间

且两个方法传入相同的参数（事件处理程序的名称，事件处理程序的函数）

支持的浏览器：IE8及以下

三解决浏览器兼容问题

可以根据能力判断来写兼容浏览器的事件处理程序的代码

     // 封装添加事件监听程序        function addEvent(ele,type,hander){           // 支持DOM2级           if(ele.addEventListener){           ele.addEventListener(type,hander,false);         }//不支持DOM2级，支持IE事件         else if(ele.attachEvent)         {          ele.attachEvent('on'+type,hander);         }//既不支持DOM2级也不支持IE，只能用DOM0级         else ele['on'+type]=hander;        }

<b>
注意：在javascript中，对象的写法等价于中括号的写法
ele.onclick等价于ele['onclick']
</b>

四事件对象

DOM中的事件对象

type 获取事件类型
target 获取事件目标
stopPropagation() 阻止事件冒泡
preventDefault() 阻止事件的默认行为

IE中的事件对象

type 获取事件类型
scrElement 获取事件目标
cancelBubble 用于阻止事件冒泡（是个属性，设为true表示阻止冒泡，设为false表示不阻止冒泡）
returnValue 该属性用于阻止默认行为，设为false表示阻止

本文的撰写参考自javascript权威指南第六版以及慕课网上相关教程，错漏之处，欢迎指正。

文章转载于:https://www.jianshu.com/p/6e489fa685c1

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《javascript 事件处理程序》

一 DOM事件

二 IE事件

三 解决浏览器兼容问题

四 事件对象

三解决浏览器兼容问题

四事件对象