解惑

解己之惑,解人之惑

标签:事件

动态添加多个事件处理函数

一般我们都是直接设定一个事件处理函数,或者在事件处理字符串里面写一串连续调用的,但是在写一些通用的东西时就不好办了,这个时候就要动态添加多个事件处理函数了,样例代码为:
var ie = /msie/ig.test(navigator.userAgent);
if(ie) {
    element.attachEvent("onfocus", focusSubmit);
} else {
    element.addEventListener("focus", focusSubmit, false);
}

注意除了方法名不一样外,事件的名字也不一样,其它的事件类似。IE是带on的,而Mozilla系列(包括FF)是不带on的。

动态设置带参数的onclick事件

本来这个应该不是什么难事,但是我们是在一个受限的情况下写代码,我们有一个RadioSelectEntry类帮助我们生成RadioButton元素,但是又没有提供设置onclick事件的方法,只能在onload里面做,但是可能有多个,我不愿意写几个一样的方法,想根据参数动态设置,这就遇到问题了,因为一般都是这样:
element.onclick=functionName;
这里的functionName就是事件处理函数,但是我的是带参数的,怎么办?呵呵,一个小技巧就可以解决:匿名函数:
    element.onclick=function() {
        functionName(param);
    };

在其它的地方覆盖元素已经有的事件处理

在某些情况下我们可能需要修改某个表单元素的事件处理机制,但是原有的代码可能不能修改,那么我们可以在原有的代码的后面增加新的代码并覆盖以前的事件处理代码:
<script language="JavaScript" for="elementID" event="eventName">
 …
</script>
 
 这段代码应该位于整个文件的末尾,这样才能比较好的保证可以覆盖已有的事件处理,当然使用这个也可以添加事件处理。
这样的坏处是事件处理和对象分离,如果是别人维护你的代码,他可能会不知道你的事件处理代码到底是怎么加的。不过这个技巧对于开发的灵活性是有很大帮助的,而且可以以一种plugin的方式动态的增加事件处理,而不用在原有的生成elements的地方加判断,可以加在其它的不影响代码阅读的地方。

© 2024 解惑

本主题由Anders Noren提供向上 ↑