完美解决一个事件激活多个函数
如果你的网页中一个“OnLoad”事件要激活两个以上的javascript函数，那怎么办呢？小阳曾查阅了不少资料，结果都不尽如人意，无非是程序员根据情况，把要激活的函数统一放在一个函数里激活。
但作为一个程序员，编写的代码的适用性是很重要的。请看下面一个例子：
<BODY OnLoad='alert("这是<BODY>标签调用的函数")'>
<script language="javascript">
function myfunction(){
alert("这是JS脚本调用的函数");
}
document.body.onload=myfunction;
</script>
</BODY>
运行后你会发现，它只跳出一个“这是JS脚本调用的函数”的警告框。< BODY>标签中要求激活的函数被“忽略”了。当然你可以运用前面提过的方法，把两个函数放一个函数里激活。但这样有不少弊端，特别是如果把这段javascript代码写成一个"myjs.js"文件，要用它的话直接加上< script language="javascript" src="myjs.js">< /script>即可，但如果还要在引用文件的页面中根据情况修改标签或者添加一段代码，多麻烦呀。这就降低了代码的适用性了。
[color=#FFFFFF'][/color]
可不可以在编写javascript代码时就设计好，如果前面OnLoad事件已经有函数要激活，让它仍然激活前面的函数，但同时也激活本段代码所需要的函数？答案是肯定的。我们先看下这段代码：
<BODY OnLoad='alert("这是<BODY>标签调用的函数")'>
<script language="javascript">
// document.body.onload是函数（function）型，用toString()函数转为字符串（string）型：
alert(document.body.onload.toString());
</script>
</BODY>
运行后其中一个警告框中提示：
function anonymous()
{
alert("这是标签调用的函数")
}
发现什么了吗？“document.body.onload.toString()”就是上面这段函数代码！我们这段字符串作为代码的一部分运行，那么我们就多了一个函数“anonymous()”，于是将这个函数和我们现在需要激活的函数一起激活就行了！
下面我们以第一次提到的代码为例进行修改，得到最终代码：
<BODY OnLoad='alert("这是<BODY>标签调用的函数")'>
<script language="javascript">
function myfunction(){
alert("这是JS脚本调用的函数");
}
//现在我们要激活的函数是“myfunction()”，原来要激活的函数是<BODY>标签里的“alert()”，
//下面这段代码可以两个一起激活：
myActive="myfunction()";
[color=#FFFFFF'][/color]
if(document.body.onload.toString())
{
eval(document.body.onload.toString().replace('anonymous()','bodyload()'));
document.body.onload=new Function("bodyload();" myActive);
}
else document.body.onload=new Function(myActive);
</script>
</BODY>
上段代码中，变量myActive是JS代码中要激活的函数，eval(string)函数是把其字符串参数当作是javascript脚本来运行。我们把document.body.onload.toString()中的“anonymous()”替换为“bodyload()”，得到一个新函数“bodyload()”，它包含了所有原来要激活的函数，再把函数“bodyload()”和我们要激活的函数一起在OnLoad事件中激活。
为什么要把“anonymous()”替换为“bodyload()”呢？因为这个方法适用于所有事件（例如onMouseOver），而所有事件toString()都是得到“anonymous()”，为了不和其它事件也用了这个方法冲突，我们把它替换掉。在其它事件中也依此替换即可。
好了，我们运行一下最终代码，如你所愿地两个函数都激活了吧？添加的代码也挺简单，有挺强的适用性。
&;#58853;从上一部分的介绍中，我们已经得到了解决一个事件激活多个函数的基本方法。
可是在一个页面中，我们可能会遇到有多个事件要激活多个函数，每个事件都要写一遍那样的代码，显然不是好主意。聪明的读者可能已经想到，应该写成一个函数activeMore()，哪个事件要激活多个函数的，直接就用activeMore()就行。
[color=#FFFFFF'][/color]
但是在上一部分中我们把事件的toString()当作javascript脚步本运行，实际上是运行一段函数代码，如果写成一个函数时还是用这个方法，即为函数中嵌套函数，将会出现意想不到的错误。 于是我们写成函数时把事件的toString()中的“function anonymous()”字符去掉，运行时就不是一个函数，而是函数内部的代码了。另外我们还可以定义先激活原有的函数还是先激活现在要激活的函数。最后为了方便使用，我们把事件和要激活的函数放在一起作为参数，写成以下函数：
function activeMore(event_function,order){
// order 为负数时先激活myFunction再激活前面的脚本
var isSn=event_function.indexOf("=",0);
var myEvent=event_function.substring(0,isSn);
var myFunction=event_function.substring(isSn 1,event_function.length);
var prefunction="";
if(eval(myEvent)) prefunction= eval(myEvent).toString().replace('function anonymous()',"");
if(order<0) eval(myEvent "=new Function(myFunction '\\n' prefunction)");
else eval(myEvent "=new Function(prefunction '\\n' myFunction)");
}
以上函数我们先把参数“event_function”进行字符串分析，得到事件（myEvent）和要激活的函数（myFunction），然后取得原来激活的函数（preFunction），最后把多个函数放在一起激活。因为我们只是把“function anonymous()”去掉，preFunction字符串的两端会带有“{ }”号，但并不影响程序的运行。
下面我们举一个实际应用的例子：使网页中所有的链接都不出现虚线框。
[color=#FFFFFF'][/color]
为了达到这个目的，我们给所有的链接的onfocus事件添加一个激活函数“blur()”。为了保证一些链接原有的onfocus事件激活函数仍然有效，我们要用一次activeMore()函数；为了能够得到所有的链接，我们用到document.body的onload事件，又要用一次activeMore()函数：
//使链接不出现虚线框：
function blurLinks(){
for(i=0;i activeMore("document.links[" i "].onfocus=if(this.blur)this.blur()",-1);
}
}
activeMore("document.body.onload=blurLinks()");
[color=#FFFFFF'][/color]
链接的onfocus事件（document.links.onfocus）要激活的函数是“if(this.blur)this.blur()”，参数order的值为-1表先激活该函数再激活它们原有的函数；document.body.onload事件要激活的函数是“blurLinks()”，参数order的值省略（或为非负数）表先激活它原有的函数再激活“blurLinks()”。
[color=#FFFFFF'][/color]
从例子中可以看到，这个函数用起来还挺简单吧。有了activeMore()函数，无论多少个事件要激活多个函数，都可以用同样的语法解决了！
设为首页
收藏本站
联系我们