`
t8500071
  • 浏览: 112911 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js动态给对象onclick事件赋值,动态传参数

JavaScriptHTML 
阅读更多
我们先看看错误的例子 

<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>


 
<script>
	function show(value)
	{
		alert(value);
	}
		
	btn.onclick = show(certid.value);
<script>

以上代码执行起来是有错误的,因为show(certid.value)这句,直接就执行了show方法,而没有正确把这个方法对象赋给btn.onclick事件.
如果我们改成这样

btn.onclick = show;
参数又无法传递.

所以正确的代码应该这样写,我们加一个参数以看得更明白一些: 
<body>
<input id="certid" type="text" value="123456" >
<input id="btn" type="button" value="button" onclick="">
</body>


 
<script>
	function show(value1,value2)
	{
		alert(value1+","+value2);
	}
	
	var i = 10;
	btn.onclick = function(){
                           show(certid.value,i);
                       };
<script>


这样就实现了动态给onclick事件句柄赋值,并支持参数的传递.
分享到：
| 使用hibernate2的时候出现session中对象重 ...
评论
3 楼 zshui_2007 2011-09-05  
非常感谢兄弟啊，这个写法很不错啊，我在IE8下测试了很多种方式，效果都不大理想，调换一下就没有问题了，关键是页面使用了iframe框架，然后在外部又给包装了一下！

thanks！
2 楼 ququjioulai 2009-07-10  
你写的这个东西感觉没什么用啊，当动态获取值的时候就不灵了
1 楼 Army 2009-02-24  
闭包基础啊。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Spring boot + thymeleaf 后端直接给onclick函数赋值的实现代码

    "Spring Boot + Thymeleaf 实现后端直接给 onclick 函数赋值的知识点" Spring Boot 是一个基于 Java 的框架，用于构建基于 Web 的应用程序，而 Thymeleaf 是一个基于 XML 的模板引擎，用于生成 HTML 内容。在 ...

    js给onclick事件赋值，动态传参数实例解说

    总结来说，当需要给JavaScript中的`onclick`事件赋值并动态传递参数时，应当避免直接调用函数并将其结果赋给`onclick`。相反，应使用匿名函数来封装函数调用，并在其中传递参数，以此确保事件处理器正确地设置并能在...

    js给onclick赋值传参数的两种方法

    在JavaScript编程中，给元素的onclick事件处理函数赋值并传递参数是一种常见的需求。本文将介绍两种主要的实现方式，帮助开发者在实际应用中更灵活地处理事件。 ### 1. 事件处理函数无参数的情况 当事件处理函数...

    IE8的JavaScript点击事件(onclick)不兼容的解决方法

    根据提供的内容，文章介绍了一种解决该问题的方法，即通过`document.createElement`创建新元素后，手动将事件处理函数赋值给元素的onclick属性，并使用`eval`函数执行这段代码。尽管这种方法可以工作，但使用`eval`...

    js动态添加事件.txt

    ### JavaScript 动态添加事件详解 #### 一、概述 在Web开发中，JavaScript作为前端开发的核心语言之一，经常被用来处理用户交互行为。而事件处理机制是实现这些交互的关键技术之一。通常情况下，我们可以通过在...

    使用JavaScript事件综合查询，js事件大全

    2. DOM0级事件处理：通过JavaScript直接赋值给元素的事件属性，如`element.onclick = function() {...}`。 3. DOM2级事件处理：使用`addEventListener`和`removeEventListener`方法来添加和移除事件处理程序，支持多...

    js事件监听机制(事件捕获)总结

    而直接在对象上赋值事件处理器的方式则有限制，通常只能绑定一个函数，后续绑定的函数会覆盖前面的函数。 关于事件的传播机制，W3C标准规定了事件流分为捕获和冒泡两个阶段。捕获阶段是从根节点开始，逐级向下直到...

    open 动态修改img的onclick事件示例代码

    在JavaScript中，你可以通过两种主要方式为元素绑定`onclick`事件：使用`addEventListener`方法或直接赋值给`onclick`属性。在这个示例中，使用的是后者，即直接给`onclick`属性赋值一个函数表达式。 示例代码首先...

    JavaScript事件机制详细研究

    这两个对象在事件 handler 中可以获取当前事件的信息，例如事件目标、事件类型、事件参数等。 JavaScript 事件机制是非常复杂的，它需要了解事件机制的实现方式、原理和浏览器的兼容性问题。只有深入了解这些知识点...

    javascript动态添加事件[文].pdf

    在JavaScript中，动态添加事件是常见的需求，尤其是在处理用户交互和实现响应式功能时。然而，由于不同浏览器对事件处理方式的差异，这通常涉及到浏览器兼容性问题。本文将详细介绍几种在JavaScript中动态添加事件的...

    javascript 事件

    事件处理函数是直接将函数赋值给元素的特定事件属性，如`onclick`。例如： ```javascript button.onclick = function() { alert('Button clicked!'); }; ``` 而事件监听器则使用`addEventListener`方法来注册事件...

    JavaScript 事件流、事件处理程序及事件对象总结

    DOM0级事件处理程序是通过JavaScript指定事件处理程序的传统方式，即将一个函数赋值给元素的事件处理程序属性，如btn.onclick = function(){}。这种方式添加的事件处理程序会在冒泡阶段被处理，而且作用域与当前元素...

    JavaScript学习笔记之JS事件对象

    第二种方法是先在JavaScript代码中定义一个事件处理函数，然后将该函数赋值给相应元素的事件属性。例如：使用document.getElementById获取元素，然后使用v.onclick = clickHandler赋值函数，需要注意的是，赋值时不...

    Web前端开发技术-JavaScript的事件.pptx

    传统方式是直接将函数赋值给元素的事件属性，如`element.onclick = function() {}`。这种方式的缺点是同一事件只能有一个处理函数，后注册的会覆盖前一个。另一种是事件监听方式，它允许为同一个事件添加多个处理...

    javaScript中常用事件

    2. DOM0级事件处理：通过JavaScript直接赋值，如`element.onclick = function(){};`。 3. DOM2级事件处理：使用`addEventListener`和`removeEventListener`方法，支持多个事件处理函数且能更精确地控制事件。 七、...

    JavaScript事件学习小结（三）js事件对象

    在使用DOM0级事件处理器时，即为元素的事件属性直接赋值一个函数，事件对象作为参数传入函数。而在使用DOM2级事件处理器，即通过addEventListener()方法添加的事件监听器中，事件对象同样作为参数传递给事件处理函数...

    JS大全（JavaScript）

    JS大全（JavaScript） ...JS大全是指JavaScript语言的详细介绍，包括基础语法、数据类型、操作符、控制结构、函数、事件处理、DOM、表单处理、window 对象、字符串操作、数学函数等方面的知识点。

    关于js中的鼠标事件总结.docx

    这些事件都伴随着一个事件对象`event`，在非IE低版本浏览器中，`event`对象是作为参数传递给事件处理函数的；而在IE低版本中，`event`对象是全局的，挂载在`window`对象下。 1. **事件的添加方式**： - **HTML内联...

    js事件绑定机制1

    `$('element').onclick(function (argument) {})`这样的写法，实际上是将一个函数赋值给了元素的`onclick`属性。当元素接收到点击事件时，这个函数就会被调用。这种方式简单直观，但存在局限性，如无法处理同一个...

    Javascript技术文档

    在本"JavaScript技术文档"中，我们将会深入探讨这个语言的各个方面，包括它如何推动Web开发进入新纪元，面向对象编程的高级概念，以及事件处理机制。以下是基于这些主题的详细知识点： 1. **Web开发新纪元**： ...

Magicbox
Global site tag (gtag.js) - Google Analytics