一个事件激活多个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()”,为了不和其它事件也用了这个方法冲突,我们把它替换掉。在其它事件中也依此替换即可。
好了,我们运行一下最终代码,如你所愿地两个函数都激活了吧?添加的代码也挺简单,有挺强的适用性。
一个事件激活多个JavaScript函数的更多相关文章
- JavaScript 函数
JavaScript 函数 介绍:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块.嗯,就像Java中封装的方法一样. 将脚本编写为函数,就可以避免页面载入时执行该脚本. 函数包含着一些代码 ...
- 零基础讲解JavaScript函数
一 JavaScript函数1 什么是函数 函数是一组代码(指令)的集合,通常用来完成某个单一的功能.(书的目录和章节,电视剧剧集的名称等)2 为什么要使用函数 2.1 把复杂程序划分成不同的功能 ...
- JS事件 什么是事件?JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
什么是事件 JavaScript 创建动态页面.事件是可以被 JavaScript 侦测到的行为. 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件. 比如说,当用户单击 ...
- JavaScript交互式网页设计 • 【第2章 JavaScript函数与事件】
全部章节 >>>> 本章目录 2.1 JavaScript 自定义函数 2.1.1 函数的定义 2.1.2 函数的调用 2.1.3 函数的参数 2.1.4 函数的返回值 2 ...
- JavaScript 函数和事件
上面例子中的 JavaScript 语句,会在页面加载时执行. 通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时. 如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用 ...
- 除了信号触发线程与接收者线程相同的情况能直接调用到slot,其它情况都依赖事件机制(解决上面代码收不到信号的问题其实很简单,在线程的run();函数中添加一个事件循环就可以了,即加入一句exec();),信号槽不就是一个回调函数嘛
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) { pThreadCon = new CSerialThread ...
- 一个简单例子弄懂什么是javascript函数劫持
javascript函数劫持很简单,一般情况下,只要在目标函数触发之前,重写这个函数即可. 比如,劫持eval函数的代码如下: var _eval=eval; eval=function(x){ if ...
- JavaScript 函数声明,函数表达式,匿名函数,立即执行函数之区别
函数声明:function fnName () {-};使用function关键字声明一个函数,再指定一个函数名,叫函数声明. 函数表达式 var fnName = function () {-};使 ...
- javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数
javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个 ...
随机推荐
- svn 服务器搭建及使用 三
SVN服务器搭建和使用(三) 接下来,试试用TortoiseSVN修改文件,添加文件,删除文件,以及如何解决冲突等. 添加文件 在检出的工作副本中添加一个Readme.txt文本文件,这时候这个文本文 ...
- 微信小程序导航栏,下面内容滑动,上册导航栏跟着滑动,内容随着导航栏滑动
16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...
- 微信小程序缓存滑动距离,当页面浏览到一定位置,滑动其他页面后返回该页面记录之前的滑动距离
15.微信小程序缓存滑动距离 我们在浏览页面的时候,然后左滑或者右滑到新的页面,等返回此页面,我们希望可以记录上次滑动的距离 虽然这个实现起来并不难,但是会遇到一些坑,因为scroll-view的组件 ...
- 升压转换器 (Boost)
升压转换器 (Boost) 需要将输入电压转换为较高的输出电压时,升压转换器 (Boost)是唯一的选择. 升压转换器透过内部 MOSFET 对电压充电来达成升压输出的目的,而当 MOSFET 关闭时 ...
- Circuit provides reference for multiple ADCs
The achievable accuracy for systems with multiple ADCs depends directly on the reference voltages ap ...
- 在Visual Studio项目中根据系统平台自动引用32或64位的DLL
最近在使用Noesis.Javascript.dll,但是这个DLL是有X86与X64二种版本的,我自己的电脑是64位的,但是别人的电脑是32位的.所以在别人那里使用的时候出了问题. 在VS里怎么引用 ...
- Idea下Python开发平台的搭建
1. python的下载 https://www.python.org/downloads/ 2. idea下python插件的安装 点击File->Settings...->Plugin ...
- 做考试系统用到的关于onbeforeunload一些兼容性问题
最近做考试系统,一些效果存在一些兼容性问题,尤其是ie6,本人js不是很好,通过查资料解决了这些问题,现总结下: 关于onbeforeunload问题: 考试时离开页面需要提示,但是直接用此方法或on ...
- mongodb,redis,memcached,mysql对比
1.性能都比较高,性能对我们来说应该都不是瓶颈总体来讲,TPS方面redis和memcache差不多,要大于mongodb 2.操作的便利性memcache数据结构单一redis丰富一些,数据操作方面 ...
- Django的restful api自动生成工具django-rest-swagger介绍
源码位置:https://github.com/marcgibbons/django-rest-swagger 文档位置:https://marcgibbons.com/django-rest-swa ...