一个事件激活多个JavaScript函数

http://www.cnblogs.com/meil/archive/2006/09/20/509359.html如果你的网页中一个“OnLoad”事件要激活两个以上的JavaScript函数,那怎么办呢?

请看下面一个例子:

  < BODY OnLoad=‘alert("这是标签调用的函数")‘>

  < 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>即可,但如果还要在引用文件的页面中根据情况修改标签或者添加一段代码,多麻烦呀。这就降低了代码的适用性了。

  可不可以在编写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("这是标签调用的函数")‘>

  < script language="JavaScript">

  function myfunction(){

  alert("这是JS脚本调用的函数");

  }

  //现在我们要激活的函数是“myfunction()”,原来要激活的函数是标签里的“alert()”,

  //下面这段代码可以两个一起激活:

  myActive="myfunction()";

  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()”,为了不和其它事件也用了这个方法冲突,我们把它替换掉。在其它事件中也依此替换即可。

  好了,我们运行一下最终代码,如你所愿地两个函数都激活了吧?添加的代码也挺简单,有挺强的适用性。

时间: 2024-11-04 04:06:27

一个事件激活多个JavaScript函数的相关文章

事件封装(多个函数绑定一个事件,估计这样解释不对)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <!-

Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库

Yahoo! UI Library?(YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术.它也包含了许多 CSS 资源.使用授权为?BSD许可证 ? YUI 包含完整的说明文件.它包含了两种元件: 工具与控件[2],和一些 CSS 资源. 工具 动画 协助达成位置移动.大小改变.透明度和其他的网页效果. 浏览器历史纪录管理工具 协助网页程式使用浏览器之上一页与书签(我的最爱)工具. 连线工具 协助管理跨

事件封装(多个函数绑定一个事件,预计这样解释不正确)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <!-

JavaScript 函数和事件 (onclick/)

JavaScript 函数和事件 通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时. 如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数. 在 <head> 或者 <body> 的JavaScript 您可以在 HTML 文档中放入不限数量的脚本. 脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中. 通常的做法是把函数放入 <head> 部分中,或者放在页面底部.这

写一个JavaScript函数,把url解析成对象

请编写一个JavaScript函数parseUrl.目的是把URL参数解析为一个对象,如: var url='http://192.168.1.1/index.php?p0=0&p1=1&p2=2'; var obj=parseUrl(url);console.log(obj.p0,obj.p1,obj.p2);//输出0,1,2 1 <script> 2 var url='http://192.168.1.1/index.php?p0=0&p1=1&p2=2'

一个简单例子弄懂什么是javascript函数劫持

javascript函数劫持很简单,一般情况下,只要在目标函数触发之前,重写这个函数即可. 比如,劫持eval函数的代码如下: var _eval=eval; eval=function(x){ if(typeof x=='undefined') {return;} alert(x); //这里可以写任意多代码 _eval(x); } eval('alert(1)');//这时eval先弹出参数值,然后才是动态执行参数值 哈哈,是不是很简单.

JavaScript函数,作用域以及闭包

JavaScript函数,作用域以及闭包 1. 函数 (1). 函数定义:函数使用function关键字定义,它可以用在函数定义表达式或者函数声明定义. a. 函数的两种定义方式: * function functionName() {} * var functionName = function(){} b. 两种函数定义不同之处 1). 声明提前问题 函数声明语句   :声明与函数体一起提前 函数定义表达式 :声明提前,但是函数体不会提前 请看下面图示:绿色线上面实在js初始加载的时候,查看

JavaScript函数的多种定义方法

缘起 javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对 javascript语言特性更进一步的深入理解,那么他有几种写法呢? ( function(){…} )() 或者 ( function (){…} () ) 首先要明白两个知识点 js中函数是引用类型: 函数一般执行方式:函数名+(): 下面的例子帮你理解引用类型 var a = function(x,y){ console.log(x + y

javascript函数绑定

Perface 如果让你实现这个页面和一些操作的,比如点击1.2.3等就在那个input text中显示,还有删除功能,拨打我们先不要管它,只是模拟而已.要是我刚开始做的话,我会这样做: 用css.HTML布局那个界面 用javascript的事件委托监听那个按钮的父节点的点击事件 但是如果我想用面向对象的思想做呢?我是用Ext做的,所以我想说的是它帮我封装了很多.可能一些没用过Ext的人不太了解我下面贴的代码,但是我会尽量解释清楚的! Description ContactTelPanel =