javascript事件

一 事件流:从页面中接收事件的顺序

1、事件冒泡

IE的事件流叫做事件冒泡;即事件开始时由最具体的元素接收、然后逐级向上传播到较不具体的节点。例如html页面:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title>事件处理程序(或事件侦听器)</title>
</head>
<body>
<div>
  <div id="myDiv">hello,你好。</div>
</div>
</body>
</html>
对应的javascript
    var btnDiv=document.getElementById("myDiv");
      btnDiv.onclick=function(event){
         alert("这是我点击的,哈哈");
         //window.event.cancelBubble=true;//针对IE, 停止事件冒泡
         event.stopPropagation();//非IE用的停止事件冒泡的方法
      };
      document.body.onclick=function(){
         alert("Body clicked!!");
      }

IE一般用window.event.cancelBubble=true 阻止事件冒泡

而非IE一般用event.stopPropagation()来阻止事件冒泡

运行这段js,会分别弹出"这是我点击的,哈哈"  和 "Body clicked!!" 这是由于事件冒泡引发的.

事件冒泡的顺序是:Element  div----》Element  body --》Element  html  --》Document


2、事件捕获

由Netscape Communicato提出的,捕获的顺序和IE的完全相反,即:

捕获的顺序为:Document--》Element  html --》Element  body--》Element  div

3、DOM事件流

“DOM2”事件流包括三个阶段:事件捕获阶段,处于目标阶段、事件冒泡阶段。

即顺序为:Document--》Element  html --》Element  body--》Element  div--》Element  body --》Element  html  --》Document

依次为;事件捕获--》目标阶段--》事件冒泡

Opera、Firefox、Chrome和Safari都支持DOM事件流;IE不支持DOM事件流


二 事件处理程序

事件是用户或者浏览器自身执行的某种动作、如:click,load等都是事件的名称;事件处理程序就是响应某个事件的函数。

1、  HTML事件处理程序 例如:

       function showMessage(){
         alert("hello world~!");
       }
<input type="button" value="html事件处理程序" onclick="showMessage();" />

这种方式有两个缺陷:1、时差问题 2、html与javascript代码的紧密耦合

2、 DOM0级事件处理程序

这种方式至今仍然为所有现代浏览器所支持,一是由于简单、二是具有跨浏览器的优势。

这种方式就是将一个函数赋值给一个事件处理程序属性,也被称为是元素的方法,例如:

     var btn=document.getElementById("myBtn");
       btn.onclick=function(){
         alert(this.id+" hello,you already click me ~!");
       }
       btn.onclick=null;//即取消事件

这时候的事件处理程序师在元素的作用域中运行的。即:程序中的this引用当前元素。


3、 DOM2级事件处理程序

Firefox,Safari,Chrome,Opera都支持DOM2级事件处理程序,而IE不支持DOM2

DOM2级事件处理程序、定义了addEventListener()和removeEventListener()两个方法用于处理指定和删除事件的程序操作。

这两个方法都接受个参数,要处理的时间名称,作为事件处理程序的函数和一个布尔值。

布尔值为true、则表示在捕获阶段调用事件处理程序,如果为false,则在冒泡阶段调用事件处理程序。例如:

       var btn=document.getElementById("myBtn2");
       btn.addEventListener("click",function(){alert(this.id)},false);
       btn.addEventListener("click",function(){alert("hello world~");},false);    
       //由于删除的时候要指定函数的名称,因此对于匿名函数无效,如下
       btn.removeEventListener("click",function(){},false);//删除无效,因为为匿名函数      
       var btn=document.getElementById("myBtn2");
       var handler=function(){alert("你好:"+this.id);};
       btn.addEventListener("click",handler,false); 
       //取消
       btn.removeEventListener("click",handler,false);//有效

4、 IE事件处理程序

IE事件处理程序,IE实现了与DOM中类型的两个方法:attachEvent()和detachEvent()

这两个方法都接受两个参数:事件处理程序的名称和事件处理程序的函数 使用attachEvent()方法、事件处理程序会在全局作用域中运行,即this等于window

例如:

       var btnIE=document.getElementById("myBtnIE");
       btnIE.attachEvent("onclick",function(){alert(this===window);});
       btnIE.attachEvent("onclick",function(){alert("hello,this is second click");});
       //IE事件处理程序也可以添加多个事件处理程序,但是这些事件处理程序师以相反的顺序被触发
       //即上面的会先弹出"hello,this is second click",然后再弹出true
       
       //使用attachEvent()添加的可以通过detachEvent()来移除,条件是必须提供相同的参数,因此添加的匿名函数也不可以移除
       btnIE.detachEvent("onclick",function(){});//无效

5、跨浏览器的事件处理程序

由于DOM和IE中的Event对象不同,但是基于它们之间的相似性可以拿出跨浏览的方案来,例如:

//跨浏览器的事件处理程序
 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;
         },
         
         getTarget: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.stopProgagation();
          }else{
             event.cancelBubble=true;
          }
        }
       };
     

这些方法都封装在EventUtil对象中,例如:利用上述封装的方法,写一个跨浏览器的例子;

事件对象、DOM中的事件对象,如果需要一个函数处理多个函数,可用type属性

  var btnType=document.getElementById("btnType");
       var handler=function(event){
           var eventType=EventUtil.getEvent(event).type;
          switch(eventType){
             case "click":
             alert("Clicked");
             break;
             case "mouseover":
             event= EventUtil.getEvent(event);
             var target=EventUtil.getTarget(event);
             target.style.backgroundColor="red";
             break;
             case "mouseout":
             event= EventUtil.getEvent(event);
             var target=EventUtil.getTarget(event);
             target.style.backgroundColor="";
             break;
          }
       };
       btnType.onclick=handler;
       btnType.onmouseover=handler;
       btnType.onmouseout=handler; 







评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值