首页 > 代码库 > JS里面的DOME

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 = http://www.mamicode.com/false; //IE
                       }
                 }
             

三、JS中的事件流 


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

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

JS里面的DOME