`
Virgo_S
  • 浏览: 1153807 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript中的触发器传递参数

    博客分类:
  • JS
阅读更多
在一个结构良好的网页中,不仅要做到结构和表现的分离,而且应该做到结构和逻辑的分离。这里的逻辑通常就是指在页面中使用的js脚本,比如:

function toggleDl(){
//statement
}
var dl=document.getElementById("commentsList");
dl.onclick=toggleDl;
这就是一个结构分离的例子,它没有把onclick直接插入到html代码当中,而是通过dom模型取到这个结点然后加入语句来实现触发点击事件的功能。在这段代码中,onclick是一个事件句柄,它的值应该是一个函数体,当点击时会运行这个函数体。所以上面的语句不能够写成:

dl.onclick=toggleDl();
或者:
dl.onclick="toggleDl()";
前者把toggleDl()这个函数的返回值赋给了dl.onclick,后者把一个字符串赋给了dl.onclick,这都不是我们所要的。从这段代码可以看出,要想给一个触发器传递带参数的函数,是做不到的,而且在很多文章中,说到web页面的结构和逻辑页面分离,就会提到只对不需要参数的函数有效。要说参数,实际上还是有一个的,就是this指针,函数体内可以使用this来表示调用它的对象。但在我设计这个blog的过程中,却遇到了不得不传递参数过去的场合,即:右边的blog列表都是通过XmlHttp从服务器取得的,取到的是一个xml文档,然后即时解析成xhtml文档显示出来。这时候,查看评论和发表评论两个按钮必须要绑定点击事件,并且这个事件函数还必须传递日志id为参数。直接写入标记属性是不行的,只能借助触发器来实现。但触发器赋值又不能有参数,这个问题想了很久,终于功夫不负有心人,给我搞定了。解决办法是这样的:
由:dl.onclick=toggleDl(); 这样的语句想到,实际上dl.onclick的值是toggleDl()这个函数的返回值,即toggleDl()已经运行。那么,为什么不返回一个函数给dl.onclick呢?在返回的函数里面使用外壳函数传递进来的参数就好了。想到这里,小兴奋的试了一下,果然可行,代码如下:

function toggleDl(test){
return function(){
  alert(test);
  //……
} }
事件操作的逻辑放在被返回的那个函数体中执行,而参数则是在包装它的函数中传递,在这个例子中就是test作为参数。而绑定事件的语句就可以写成如下的样子:
dl.onclick=toggleDl(12);
这样dl被点击时就会正确的传递参数了。
分享到:
评论

相关推荐

    javascript的事件触发器介绍的实现

    文章中提到的`trigger`函数是一个典型的事件触发器实现示例,它接受一个DOM元素,一个事件类型或事件对象,传递给事件处理函数的附加参数以及是否阻止冒泡的选项。函数通过模拟事件对象并手动触发,使得即使没有实际...

    (JavaScript.Patterns).Stoyan.Stefanov.文字版

    1. **函数作为一等公民**:在JavaScript中,函数不仅是一种数据类型,还可以被赋值给变量、作为参数传递给其他函数,甚至可以作为返回值。这种特性使得JavaScript具备强大的函数式编程能力。 2. **闭包**:闭包是...

    JavaScript开发技术大全(电子书)

    函数是可重用的代码块,可以接受参数并返回值,它们在JavaScript中扮演着重要角色。 接着,深入学习JavaScript,你需要了解对象和原型。JavaScript的万物皆对象,每个对象都有一个内部属性[[Prototype]],通过原型...

    JavaScript高级程序设计2,学习笔记---第一篇

    在JavaScript中,所有值都是对象,即使是函数也是对象,因此可以作为变量存储,也可以作为参数传递。 控制流包括条件语句(如`if...else`)和循环(如`for`, `while`, `do...while`)。这些结构使得代码可以根据...

    JavaScript JavaScript

    函数是可重复使用的代码块,JavaScript中的函数可以作为值传递,也可以作为参数和返回值。作用域决定了变量在何处可见,全局作用域的变量在整个脚本中都可访问,而局部作用域的变量只在其定义的函数内可见。 **第三...

    .net js调用cs带参数代码

    在这个示例中,`callCSMethod`函数调用了C#的`OK`方法,传递了一个参数,并通过回调函数接收结果或错误。 #### 步骤4:创建按钮或其他触发器 最后,我们需要一个用户界面元素(如按钮),当用户交互时,触发...

    JavaScript网页开发体验式教程

    - 函数:了解函数的定义、调用和参数传递,以及函数作为一等公民的特性。 2. **DOM操作** - DOM(文档对象模型)是HTML和XML文档的编程接口,JavaScript通过DOM可以动态修改页面内容。 - 学习选取元素:通过...

    JavaScript 程序开发手册

    JavaScript中的函数是一等公民,可以作为参数传递、返回值,甚至存储在变量中。函数定义了代码块,可以通过函数表达式和函数声明创建。理解作用域是JavaScript编程的关键,全局作用域在整个脚本中可见,而局部作用域...

    javascript

    函数可以作为参数传递,也可以作为返回值。JavaScript的作用域分为全局作用域和局部作用域,函数内部定义的变量在函数外部不可见,这就是所谓的闭包特性。ES6引入了块级作用域,通过let和const关键字实现。 3. **...

    《JavaScript宝典》光盘源代码

    函数不仅可以作为值传递,还可以作为其他函数的参数或返回值。闭包则是函数和其词法作用域的组合,允许函数访问并操作其外部作用域的变量,即使在其定义的上下文之外。源代码中包含的示例将有助于你掌握这些概念。 ...

    JavaScript权威指南(第5版)中文版(上)

    而将函数视为一等公民,则意味着函数可以作为变量赋值、作为参数传递,甚至可以作为其他函数的返回值。 书中的内容涵盖了JavaScript的基础语法,如变量、数据类型、运算符、流程控制(条件语句和循环)、函数、作用...

    JavaScript帮助文档CHM.rar

    在JavaScript中,函数也可以作为变量赋值和作为参数传递,这是其“函数第一类对象”的特性。 JavaScript的对象是键值对的集合,可以使用字面量语法创建,如`var obj = {key: value}`。通过引用来访问对象的属性,如...

    名师总结 JavaScript

    函数可以作为参数传递,也可以作为返回值,这是JavaScript的高阶函数特性。对象则通过键值对实现数据存储,可以使用构造函数和原型链来创建和继承对象。 3. **DOM(Document Object Model)**: DOM是HTML或XML文档...

    JQuery上传插件Uploadify并传参数(一)

    本篇文章将深入探讨Uploadify插件的基本使用,以及如何在上传过程中传递参数。 **一、Uploadify简介** Uploadify是一款基于jQuery的文件上传插件,它利用Flash技术实现了异步多文件上传,用户可以选择多个文件一次...

    Jquery Uploadify多文件上传带进度条 且传递自己的参数示例

    在本文中,我们将深入探讨如何使用Jquery Uploadify插件实现多文件上传功能,并结合进度条显示上传进度,同时传递自定义参数。Jquery Uploadify是一个广泛使用的jQuery插件,它使得在网页上进行文件上传变得简单而...

    从Node.js事件触发器到Vue自定义事件的深入讲解.docx

    本文主要讨论了从Node.js中的事件触发器到Vue框架中的自定义事件的原理和应用,帮助开发者深入理解这两者之间的关联。 首先,让我们从Node.js的事件触发器开始。Node.js提供了一个名为`EventEmitter`的内置模块,它...

    JavaScript教程--从入门到精通

    函数定义了执行特定任务的代码块,通过参数传递数据,并可能返回结果。此外,JavaScript支持匿名函数和箭头函数,这为编写简洁的代码提供了便利。 理解作用域和闭包是JavaScript进阶学习的关键。作用域决定了变量的...

    Javascript常用486范例

    了解函数的定义、参数传递、作用域(全局与局部)、闭包以及箭头函数的使用,能够提高代码的复用性和模块化。 4. **对象**:JavaScript的对象是键值对的集合,可以通过字面量语法或构造函数创建。掌握对象的属性、...

    JavaScript 语言基础知识点总结(思维导图)

    JavaScript 中函数是第一类对象,可以赋值给变量、作为参数传递或作为其他函数的返回值。函数声明使用 `function` 关键字,ES6 中引入了箭头函数(=>)的简洁语法。 5. 对象: 对象是键值对的集合,通过花括号 `{...

    页面弹出窗体且带参数

    - **查询字符串**: 在URL中传递参数的一种方式。 ### 二、技术实现 #### 1. 页面设计与按钮触发 在页面中,通常会有一个按钮或链接,当用户点击时,触发弹出窗体的行为。例如,在给定的代码片段中,`LinkButton`...

Global site tag (gtag.js) - Google Analytics