注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

云淡风轻

云淡风轻近午天,傍花随柳过前川。

 
 
 

日志

 
 

JS添加事件处理函数  

2008-05-08 23:24:47|  分类: 格物致知 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
作为一种事件驱动的编程语言,Js的程序很少主动执行,一般都是由一些事件触发,像click,dblclick,keypress,mousemove等事件,然后执行一段脚本。给一个事件指派一个处理函数,一般称做:注册事件处理函数。

    比如页面上有一个p元素:
       <p id='lethe'>读书千百行,若喝孟婆汤。怎么办?</p>
    我们用
        x = document.getElementById('lethe')
    得到了这个结点。现在尝试给它添加一个鼠标点击的事件,当鼠标点击的时候,弹出一句话:
       “笔头勤记写,百年难相忘”
    事件处理函数很简单:function beLessForgetfull(){ alert("笔头勤记写,百年难相忘") }

    很遗憾的是,不同的浏览器添加事件处理函数的方法不太一样。主要有三种:
    传统方式,把事件处理函数做为DOM元素的一个属性,像onclick,onmouseover等。现代浏览器一般会兼容这种写法。
       x.onclick = beLessForgetfull;
    传统方式的缺点是,不能给一个元素的一种事件定义两个事件处理函数,因为后面添加的函数会覆盖前面的。

高级方法:
    IE系列的:attachEvent(eventType, handler)
       x.attachEvent('onclick', beLessForgetfull);
    W3CDOM定义的:addEventListener(eventType, handler, capture),多了一个capture参数,是boolean类型的。如果是false,表示事件冒泡。如果为true则表示事件捕捉。IE只支持冒泡,所以通常都是false。
       x.addEventListener('click', beLessForgetfull, false);
    优点就是,可以给一个元素一种事件注册多个处理函数。

添加了事件处理函数,如果在不用的时候,自然应该可以移除。
传统方式注册的处理函数,要移除就非常简单了。
    el.onclick = null;   // 移除click处理函数。

高级方法注册了的事件处理函数,要用detachEvent或removeEventListener来移除。参数和attachEvent或addEventListener一样。
    x.detachEvent('onclick', beLessForgetfull);

    x.removeEventListener('click', beLessForgetfull);
但是如果要移除所有的事件处理函数,因为没有一个方法可以找到所有注册在一个元素上的事件处理函数,所以需要写程序的人自己去记住这些函数,然后一个一个地去除。


IE的attachEvent还有一个问题是,事件处理函数是全局的。就是说,在事件处理函数里,this是等于window的。
要解决这一点并不太难。这是例子:
  4 function addEventSimple(evt, el, handler){
  5     if(el.addEventListener){
  6         el.addEventListener(evt, handler, false);
  7     }else if(el.attachEvent){
  8         el.attachEvent('on'+evt, function(){
  9             return handler.call(el, window.event);
 10         });
 11     }else{
 12         //var oldHandler = el['on'+evt] || function(){};
 13         el['on'+evt] = handler;
 14     }
 15 }
用到了函数对象的call方法,这个方法和apply方法,都是可以指定函数里的this对象的,它们的差别只在于参数传递方式的不一样。
上面的例子的最后的else部分,还没有写完。原先是想让只支持传统方式的浏览器也可以注册多个事件处理函数。

不过,对于这个addEventSimple,如果要再写一个移除事件处理函数的,就是removeEventComplex,如果只是复杂还好,似乎还是不可能的。在jQuery,似乎是用了一个$Event对象在管理所有的事件注册和移除,有空看看它是怎么实现的。

  评论这张
 
阅读(1625)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017