js事件

Posted 2022-12-05 _oldzhang

js事件流：

事件流描述的是从页面中接受事件的顺序,IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流

1，事件冒泡：事件最开始由最具体的元素（最深的那个节点）接收，然后逐级向上传播，到最不具体的那个节点。

2，事件捕获：不太具体的节点应该更早地接收到事件，而最具体的那个节点最后接收到事件。

大部分浏览器都支持事件冒泡

二、事件处理程序
1、html事件处理程序: 将事件处理绑定到HTML元素上，例如在button上写οnclick="xxx()";
2、DOM0级事件处理程序：获取到元素，然后绑定事件，如a.οnclick=xxx();
3、DOM2级事件处理程序
DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都 接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。
4、IE事件处理程序
attachEvent()添加事件
detachEvent()删除事件
这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数
5、跨浏览器的事件处理程序: 封装事件处理的方法兼容多个浏览器 

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;
           
         
  

事件对象event：

在事件处理程序中，可传入一个参数e，代表事件对象，老版本IE使用window.event来获取到事件对象

1，dom中的事件对象常用属性与方法

type属性，用于获取事件类型

target属性，用于获取事件的目标

stopPropagation()方法，用于阻止事件冒泡

preventDefault()方法，阻止事件的默认行为，例如阻止a标签的默认跳转行为

2，IE中的事件对象常用属性与方法

1，type用于获取事件类型

2，srcElement属性，用于获取事件的目标

3，cancleBubble属性设置为true，用于阻止事件冒泡

4，returnValue属性设置为false阻止事件的默认行为