js 事件

事件模型

• DOM0 :原始事件模型
  • btn.onclick=function(){}这种类型的事件模型（btn.onclick = null;）
  • 基于DOM0的事件，对于同一个dom节点而言，只能注册一个， 取后面事件。后边注册的同种事件会覆盖之前注册的。
• DOM2
  • 冒泡 ：事件从事件的发生地（目标元素），一直向上传递，直到window
    • IE只支持事件冒泡
  • 捕获 ：事件是从window向下传递，直到事件的发生地（目标元素）
  • 设置捕获和冒泡：
    • IE：默认事件冒泡
    • 标准： addEventListener()第三个参数:捕获/冒泡 = true/false
  • 绑定或者解除事件
    • 标准：addEventListener(type,handler),removeEventListener(type,handler)
    • IE: attachEvent,target.detachEvent("on"+type,handler);
  • 阻止事件冒泡：evt.stopPropagation()/evt.cancelBubble=true
  • 获取事件对象(标准||IE):var event=window.event||event;
  • 获取事件源对象：var target = event.target||event.srcElement;
  • 同一个节点元素，给她添加捕获和冒泡事件模型，捕获比冒泡快
  • 绑定多个事件的顺序:比如说一下子注册了3个冒泡事件，那么执行顺序就按照注册的顺序来，先注册先执行

---

事件委托

应用场景：动态添加 或删除孩子的时候
含义：孩子的事委托父亲做

<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被点击时，由于冒泡原理，事件就会冒泡到ul上，因为ul上有点击事件，所以事件就会触发.
当然，这里当点击ul的时候，也是会触发的，那么问题就来了，如果我想让事件代理的效果跟直接给节点的事件效果一样怎么办，比如说只有点击li才会触发，不怕，我们有绝招：

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

***