事件模型

事件模型可以分为三种：

• 原始事件模型（DOM0级）

//HTML代码中直接绑定
<input type="button" onclick="fun()">
//通过JS代码绑定
var btn = document.getElementById('.btn');
btn.onclick = fun;

特性

1.绑定速度快
2.同一个类型的事件只能绑定一次,后绑定的事件会覆盖之前的事件
3.只支持冒泡，不支持捕获

• 标准事件模型（DOM2级）

1.事件捕获阶段：事件从document一直向下传播到目标元素, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行
2.事件处理阶段：事件到达目标元素, 触发目标元素的监听函数
3.事件冒泡阶段：事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行

//事件绑定监听函数的方式如下:
addEventListener(eventType, handler, useCapture)

特性

1.可以在一个DOM元素上绑定多个事件处理器，各自并不会冲突
2.执行时机.当第三个参数(useCapture)设置为true就在捕获过程中执行，反之在冒泡过程中执行处理函数

• IE事件模型（基本不用）

IE事件模型共有两个过程:
1.事件处理阶段：事件到达目标元素, 触发目标元素的监听函数。
2.事件冒泡阶段：事件从目标元素冒泡到document, 依次检查经过的节点是否绑定了事件监听函数，如果有则执行

attachEvent(eventType, handler)

如何阻止事件冒泡和默认事件？

<form id="form1" runat="server">
　　　　<div id="divOne" onclick="alert('我是最外层');">
　　　　　　<div id="divTwo" onclick="alert('我是中间层！')">
　　　　　　　　<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com"onclick="alert('我是最里层！')">点击我</a>
　　　　　　</div>
　　　　</div>
　　</form>
<script type="text/javascript">
        $(function() {
            $("#hr_three").click(function(event) {
                event.stopPropagation();
            });
        });
<script>

1.event.stopPropagation();
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（执行超链接的跳转）
2.return false;
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（不执行超链接的跳转）
还有一种与冒泡有关的：
3.event.preventDefault();
事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

事件委托

它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

例子：

<ul id="ul1">
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
//事件委托的方式
window.onload = function(){
    var oUl = document.getElementById("ul1");
   oUl.onclick = function(){
        alert(123);
    }
}

这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发：

Event对象提供了一个属性叫target，可以返回事件的目标节点，我们成为事件源，也就是说，target就可以表示为当前的事件操作的dom，但是不是真正操作dom，当然，这个是有兼容性的，标准浏览器用ev.target，IE浏览器用event.srcElement，此时只是获取了当前节点的位置，并不知道是什么节点名称，这里我们用nodeName来获取具体是什么标签名，这个返回的是一个大写的，我们需要转成小写再做比较（习惯问题）：

window.onload = function(){
　　var oUl = document.getElementById("ul1");
　　oUl.onclick = function(ev){
　　　　var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.nodeName.toLowerCase() == 'li'){
　 　　　　　　 alert(123);
　　　　　　　  alert(target.innerHTML);
　　　　}
　　}
}

参考：
js中的事件委托或是事件代理详解