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个冒泡事件,那么执行顺序就按照注册的顺序来,先注册先执行

事件委托

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

  • 111
  • 222
  • 333
  • 444
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);
    }
  }
}

***

你可能感兴趣的:(js 事件)