叁柒設計 三七设计 Three seven design 我的学习与分享
详细信息
来自:关键字:

JS添加事件处理函数

  July 11th,2009 23:18:39   Category : Javascript
 Click (1865)

作为一种事件驱动的编程语言,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的。
要解决这一点并不太难。这是例子:
function addEventSimple(evt, el, handler){
     if(el.addEventListener){
         el.addEventListener(evt, handler, false);
     }else if(el.attachEvent){
         el.attachEvent(’on’+evt, function(){
             return handler.call(el, window.event);
         });
     }else{
         //var oldHandler = el['on'+evt] || function(){};
         el['on'+evt] = handler;
   }
}
用到了函数对象的call方法,这个方法和apply方法,都是可以指定函数里的this对象的,它们的差别只在于参数传递方式的不一样。
上面的例子的最后的else部分,还没有写完。原先是想让只支持传统方式的浏览器也可以注册多个事件处理函数。
不过,对于这个addEventSimple,如果要再写一个移除事件处理函数的,就是removeEventComplex,如果只是复杂还好,似乎还是不可能的。在jQuery,似乎是用了一个$Event对象在管理所有的事件注册和移除

[ 资讯评论 ]
暂时没有任何评论!
[ 提交评论 ]
请选择表情
  • 昵称:
  • *
  • 验证码:
  • *点击更换验证码
  • 尚能输入个字符
申明:本网站部分分享内容来自网络,如有侵权请及时与我联系,谢谢,另网友评论仅代表个人观点,与本站立场无关,如果在评论中发表违反我国任何法律的,请即时与我们联系(QQ:77132915),我们将立即予以删除. [ 注:提交评论后,通过审核后方能在网站上显示!]