JS添加事件处理函数

 

作为一种事件驱动的编程语言，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对象在管理所有的事件注册和移除