JAVA & XML & JAVASCRIPT & AJAX & CSS

Web 2.0 技术储备............

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  77 随笔 :: 17 文章 :: 116 评论 :: 0 Trackbacks
一个事件其实在页面上 有多个元素相应事件处理,点击页面上的一个button,会发生什么?其实 是相当于先后点击了按钮,它的容器,及这个页面.也就是说没一个元素都按照特定的顺序响应那个事件.事件的发生顺序在IE和mozilla在事件支持上的主要差别.
  事件流
   冒泡技术.冒泡型事件的基本思想,事件按照从特定的事件目标开始到最不确定的事件目标.例如:
    <html>
        <head>
            test
        <head>
        <body onclick="handle()">
             <div onclick="handle1()">click</div>
        </body>
    </html>
  IE5.5顺序是div  --body--document.
 在IE6中div-body--html--document.
 mozilla的顺序是div--body--html--html--document--window.

  还有另外一种技术:捕获型事件,它的执行顺序正好和冒泡技术相反,从document开始到div结束.
DOM事件流 
     同时支持2种事件,但是捕获型事件先发生.2种事件流会触及DOM中的所有对象,从document开始,也在document结束.DOM事件流最独特的性质是,文本节点也会触发事件(在IE不会),所以如果点击click, dom事件是这样的:
  首先window--document--body--div--click.
  然后click--div--body--document--window.
所以一个事件处理函数在DOM浏览器中会执行2次.
给事件指定处理函数  的做法比较简单 
var obj = document.getElementById("id");
obj.onclick=function(){}
或者直接在html标签里加onclick="function-name"
这两种方式是在目前所有流行的浏览器种都可以使用.但是如何为每个事件分配多个处理函数呢?
IE的做法:
   在IE  中,每个元素和window对象都有2个方法:attachEvent()和detachEvent(); attachEvent用来给一个事件附加事件处理函数. 而detachEvent用来将事件处理函数分离.每个方法都有2个参数:要分配的事件处理函数的名字(例如:onclick)和一个函数引用.
例如:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.attachEvent("onclick",fnClick);
obj.attachEvent("onclick",fnClick1);
obj.detachEvent("onclick",fnClick);
事件的执行顺序是按照添加的顺序执行的.
DOM方法
     dom中对应的方法是addEventListener()和removeEventListener ,这两个方法有3个参数,事件名称,要分配的函数和处理函数是用于冒泡阶段还是捕获阶段.如果事件处理函数是用在捕获阶段,第三个参数为true,冒泡阶段为false.用法和IE中的用法一样,不再多说了,就举一个例子吧:
var fnClick=function(){alert("ss")}
var fnClick1=function(){alert("sss")}
var obj=document.getElementById("id")
obj.addEventListener("click",fnClick,false);
obj.addEventListener("click",fnClick1,false);
obj.removeEventListener("click",fnClick,false);
注意这里的是事件名称"click",不是要分配的事件处理函数的名字"onclick",自己体会一下吧.

如何获取事件对象:
    获取事件信息是很重要的事情,事件对象只在事件发生时被创建,而且只有在事件处理函数中可以访问,当所有的事件处理函数结束后,事件对象被销毁.
IE和DOM在获取事件对象上也是有差别的.
IE中,事件对象时window的一个属性event,也就是说必须在事件处理函数中这样访问:
obj.onclick=function(){obj 1= window.event;}
尽管它是window的属性,event对象也是只能在事件发生时访问.
DOM的准则说明,event对象必须座位唯一的参数传递给事件处理函数,所以在DOM浏览器中访问对象有两种方法:
1.obj.onclick=function(){obj1=arguments[0]}
2.obj.onclick=function(envent){}
事件的属性:介绍几个比较常用的
IE:
altKey                 boolean                                          true 按下alt健
button                 integer                                            0=未按键,
                                                                                1=按下左键,
                                                                                2=右健,
                                                                                3=同时按左右,
                                                                                4=按下中键,
                                                                                5=左键+中键,
                                                                                6=右键+中键,
                                                                                7=三个健子一起按下
cancelBuble          boolean                                            设置成true 会停止事件向上冒泡.
fromElement         element                                         鼠标事件中,鼠标所离开的元素.
srcElement                                                                引起事件的元素
toElement                                                                  鼠标事件中,鼠标所进入的元素
type                      string                                           事件的名称.
DOM中:
bubbles                boolean                                         表示事件是否是否在冒泡阶段中
cancelable            ''                                                    表示事件能否取消.
charCode                                                                   按下健的unicode值,和IE的keyCode不一样
currentTarget                                                             事件目前所指向的元素
detail                    integer                                            鼠标点按钮被点击的次数
eventPhase           integer                                            1=捕获阶段,2=在目标上,3=冒泡阶段
isChar                  Boolean                                          表示按键是否时字符
preventDefault       Function                                       调用这个方法可以终止事件的默认行为
relatedTaget                                                               事件的第二个目标,经常用户鼠标事件.
stopPropagation                                                      调用这个方法,组织事件将来事件的冒泡.
posted on 2006-12-01 20:00 Web 2.0 技术资源 阅读(2123) 评论(3)  编辑  收藏

评论

# re: javascript 事件处理 IE和标准dom 的差别 2006-12-04 10:28 kim
nice  回复  更多评论
  

# re: javascript 事件处理 IE和标准dom 的差别 2007-04-30 10:58 steven tong
attachEvent添加的事件处理函数中的this指针不会指向是srcElement而是window对象.
  回复  更多评论
  

# re: javascript 事件处理 IE和标准dom 的差别 2007-08-24 14:06 gameshan
attachEvent添加的函数,在调用时,this指向的是window对象
如果想指向自己的对象,可以使用闭包来实现。  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: