JS里面的DOME

一、JS中的DOM0事件模型
      1、内容模型：直接将函数名作为HTML标签的某个事件属性的属性值;
                例  rg:<button onlick="func()">按钮</button>

      2、脚本模型：在JS脚本中通过事件属性进行绑定 ；

              例 eg：window.onlead = function（）{}
    但是它也有局限性即：同一个节点只能绑定一个同类型事件

二、JS中的DOM2事件模型
     1、添加事件绑定：btn1.addEvent（"onlick"函数）
        其他浏览器：btn1btn1.addEventListener（"click"函数 ，true/false）；
        参数三：false（默认）;表示事件冒泡，true:表示事件捕获
          兼容写法：if（btn1btn1.addchEvent）{
                      btn1.btn1.addchEvent
                    }else{
                       btn1.btn1.addEventListener（）
                   }
     优点：同意节点，可以添加多个同类型事件的监听器

     2、取消事件绑定：
       注： 如果取消事件绑定，那么在绑定事件时，回调函数必须使用有名函数，二不能使用匿名函数，
        因为在取消事件绑定时，需传入函数名
            removeEventListener（“click，函数名）     detachEvent("onclick"函数名)
     3、阻断事件冒泡 :
        （1）  IE浏览器中将e.canceBubble属性设为true
                   其他浏览器：调用e.stopPropagetion（）;方法
                   兼容写法：function myParagraphEventHandler(e) {
                       e = e || window.event;
                        if (e.stopPropagation) {
                        e.stopPropagation(); //IE以外 
                        } else {
                      e.cancelBubble = true; //IE 
                           }
                    }
       （2） 阻止默认事件：

                IE浏览器中：将e.returnValue属性设为false；
                其他浏览器：调用e.preventDefault();方法
                兼容写法：function eventHandler(e) {
                      e = e || window.event;
                防止默认行为 
                     if (e.preventDefault) {
                          e.preventDefault(); //IE以外 
                  } else {
                        e.returnValue = false; //IE  
                       }
                 }
             

三、JS中的事件流 

   1、元素冒泡：当某DOM元素触发 某事件是时  会从当前DOM元素开始，逐个触发其祖先元素的同类事件，指导DOM根节点
              DOM模型  均为冒泡事件
             IE中使用，attachEvent（）添加的事件  均为冒泡；
             其他浏览器，.addEventListener添加事件 ，当三个事件参数为false时  为冒泡
  2、事件捕获 ：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，知道触发到当前元素为止

             只能使用.addEventListener添加事件，并设置四三个参数为ture时，才能进行捕获当前元素
    
             注：冒泡事件：当前元素--->根节点                                  捕获事件：根节点--->当前元素