javascript 事件探索

页面导航:首页 > 网络编程 > JavaScript > javascript 事件探索

javascript 事件探索

来源: 作者: 时间:2016-02-03 09:20 【

1 事件流: DOM同时支持两种事件模型:捕获型事件(非IE,从document 到具体元素)和冒泡型事件(IE,从具体元素到document)。2 事件处理程序 html事件处理程序,简单点就是在html 元素上

1 事件流:

DOM同时支持两种事件模型:捕获型事件(非IE,从document 到具体元素)和冒泡型事件(IE,从具体元素到document)。

2 事件处理程序

html事件处理程序,简单点就是在html 元素上面直接绑定一个onclick 类似的事件,缺点显而易见是有太强的耦合性

Dom0 级事件处理程序,类似于document.getById().onclick=function(){} 这样类似的

3 DOM2级事件处理程序

DOM2级事件定义了两个方法(非IE):用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。它们都接收三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。

IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件

4 事件对象
事件对象event
1、DOM中的事件对象
(1)、type:获取事件类型
(2)、target:事件目标
(3)、stopPropagation() 阻止事件冒泡
(4)、preventDefault() 阻止事件的默认行为
2、IE中的事件对象
(1)、type:获取事件类型
(2)、srcElement:事件目标
(3)、cancelBubble=true阻止事件冒泡
(4)、returnValue=false阻止事件的默认行为


下面通过一个具体例子来进行js封装和了解事件对象

index.html


 
   事件流
   
   <script src="js/event.js"></script>
   <script src="js/script.js"></script>
   
      

event.js

var eventUtil={
         	// 添加句柄
         	addHandler:function(element,type,handler){
               if(element.addEventListener){
                 element.addEventListener(type,handler,false);
               }else if(element.attachEvent){
                 element.attachEvent('on'+type,handler);
               }else{
                 element['on'+type]=handler;
               }
         	},
         	// 删除句柄
         	removeHandler:function(element,type,handler){
               if(element.removeEventListener){
                 element.removeEventListener(type,handler,false);
               }else if(element.detachEvent){
                 element.detachEvent('on'+type,handler);
               }else{
                 element['on'+type]=null;
               }
         	},
          getEvent:function(event){
            return event?event:window.event;
          },
          getType:function(event){
            return event.type;
          },
          getElement:function(event){
            return event.target || event.srcElement;
          },
          preventDefault:function(event){
            if(event.preventDefault){
              event.preventDefault();
            }else{
              event.returnValue=false;
            }
          },
         stopPropagation:function(event){
           if(event.stopPropagation){
             event.stopPropagation();
           }else{
             event.cancelBubble=true;
           }
         }
  }

script.js

window.onload=function(){
  var go=document.getElementById('go'),
      box=document.getElementById('box');

  eventUtil.addHandler(box,'click',function(){
  	alert('我是整个父盒子');
  });

  eventUtil.addHandler(go,'click',function(e){
  	//e=eventUtil.getEvent(e);
  	e=e || window.event;
  	alert(eventUtil.getElement(e).nodeName);
  	eventUtil.preventDefault(e);
  	eventUtil.stopPropagation(e);
  });

}






Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<