`
talentluke
  • 浏览: 606716 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript动态的为元素添加带参数和不带参数的事件

阅读更多

目前的的页面布局都是基于XHTML,通过DIV+CSS布局,实现DHTML的样式。所以这个JavaScript动态的为元素添加事件因此而普遍了。下面我说说怎样通过javascript为元素动态的添加事件.
Javascript为元素动态的添加事件包括两种情况:
不带参数的事件和带参数的事件
一、不带参数的事件:
两种方式:直接给对象添加事件,节点添加事件
例如给一个id为tab1的添加onclick事件
第一种情况:
var t = document.getElementById("NewTitle");
t.onclick = function showmsg(){
    alert('Hello!World');
}
第二种情况 这种情况更加动态,更为实用,而且还能添加多个函数(添加的事件的顺序即执行顺序),呵呵
   var tb = document.getElementById("NewTitle");
    if(window.addEventListener){ // Mozilla, Netscape, Firefox
        td_value.addEventListener('click', alert('cc'), false);
        td_value.addEventListener('click', alert('cc'), false);
    } else { // IE
        td_value.attachEvent('onclick',  function(){alert('changchang');});
        td_value.attachEvent('onclick',  function(){alert('changchang');});
    }
二、带参数的事件
这里的functionName就是事件处理函数,如果是带参数的那该怎么办,
有人说是这样:
element.onclick=function(sb){
        alert(sb);
    }
是不是上面的那种写法呢?答案是不正确的

解决方法一:定义一个不带参数的函数,并在其中调用带参数的函数:

function functionName(){

  anotherFunctionName(param1, param2,...);

}

element.onclick=functionName;//函数名称,不能带有参数
解决方法二:匿名函数:
    element.onclick=function() {
        functionName(param1, param2,...);

    }
 这样就巧妙的通过匿名方法实现了!

付出最大努力,追求最高成就。
分享到:
评论

相关推荐

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

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

    动态加载带参数的ASCX用户控件

    "动态加载带参数的ASCX用户控件"是这个过程的一种高级应用,它涉及到在页面生命周期的不同阶段向页面中添加ASCX控件,并且能够传递参数以定制其行为。下面我们将详细探讨这个主题。 首先,用户控件(ASCX)是ASP...

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

    在标准模式下,IE8及以下版本不支持通过`setAttribute`直接为元素添加事件监听器,这与现代浏览器如Chrome和Firefox存在差异。为了确保兼容性,通常推荐使用`addEventListener`方法为元素添加事件监听器,但由于IE8...

    javascript添加背景水印

    JavaScript是一种广泛应用于Web开发的脚本语言,尤其在前端领域,它被用来为网页增加交互性和动态效果。在这个场景中,我们关注的是如何使用JavaScript在网页背景上添加水印效果。"watermark.js"文件很可能就是一个...

    脚本动态创建复选框,添加事件

    在给定的代码示例中,我们看到了一个利用JavaScript动态创建复选框并为每个复选框添加事件处理程序的过程。这个过程涉及到了DOM操作、事件绑定以及字符串处理等关键知识点。 ### 一、动态创建DOM元素 在代码片段中...

    html、htm后带参数的代码

    虽然它们通常用于创建静态页面,但也可以通过添加参数来实现动态交互。在HTML中加入参数,可以使静态页面具备处理用户输入或与服务器进行数据交换的能力,这在很多场景下是非常实用的。 在描述中提到的"html后带...

    javascript动态创建表格及添加数据实例详解

    在了解动态创建表格及添加数据的过程中,首先我们要了解的是JavaScript的基础语法和DOM操作。JavaScript是一种动态的脚本语言,能够对网页上的元素进行动态的操作和修改。而DOM(文档对象模型)是一个跨平台和语言的...

    javascript 取Url参数和去掉字符串前后空格方法

    ### JavaScript 获取URL参数和去除字符串前后空格的方法 在日常的Web开发中,经常会遇到需要获取URL中的参数或处理字符串的情况。例如,在用户点击某个链接或者表单提交后,我们可能需要从URL中提取出某些特定的...

    《JavaScript动态网页设计经典实例教程》

    2. **DOM操作**:DOM(Document Object Model)是HTML和XML文档的结构化表示,JavaScript通过DOM可以操作网页元素,如获取元素、修改元素内容、添加或删除元素,以及改变样式等。 3. **事件处理**:JavaScript通过...

    head first javascript 中文版.pdf

    JavaScript是一种广泛应用于Web开发的脚本语言,它主要在客户端运行,为网页添加交互性,使得用户能够与页面进行动态沟通。"Head First JavaScript"是一本面向初学者的优秀教材,旨在通过直观、易懂的方式教授...

    JavaScript给每一个li节点绑定点击事件的实现方法

    最后,通过闭包(IIFE)解决循环中变量共享问题,实现为每个节点绑定带有不同参数的事件处理函数。 这种技术不仅能够提升网页的交互性,还能够根据用户的操作来动态地改变网页元素的样式或内容。在实际应用中,这...

    Javascript

    JavaScript,一种广泛应用于Web开发的脚本语言,是创建动态网页和交互式用户体验的核心工具。作为初学者,了解JavaScript的基本概念、语法以及它在实际应用中的作用至关重要。 1. **JavaScript简介** JavaScript是...

    javascript手册 javascript手册 javascript手册

    创建数组的三种方式包括不带参数的新建空数组,指定数组长度,以及直接初始化包含元素的数组。数组的`length`属性用于获取或设置数组的元素数量。`Array`对象还提供了多种内置方法,如`concat()`用于合并数组,`join...

    javascript novice to Ninja

    文档对象模型(DOM)是JavaScript中与页面内容进行交互的核心,书中介绍了DOM的结构,如何使用JavaScript来访问和修改DOM,以及动态创建和操作DOM元素等。 事件处理是构成网页交互性的另一个重要方面。作者会带领...

    JavaScript权威指南第六版中文版+附带源码

    书中会介绍如何选择元素、添加和删除节点,以及如何修改元素的属性和样式。 6. **BOM与事件处理**:浏览器对象模型(BOM)让JavaScript可以访问浏览器特性,如窗口、历史、存储等。事件处理是JavaScript实现用户...

    完全手册:JavaScript动态网页开发详解(1-8章pdf格式)

    这一章将介绍如何使用JavaScript来查找、修改和添加DOM元素,从而实现动态网页效果。 第六章:事件处理 事件是用户与网页交互的触发点,如点击按钮或滚动页面。本章将讲解如何绑定和处理事件,以及使用事件委托等...

    javaScript课件.rar

    DOM(Document Object Model)操作也是重点,JavaScript可以通过DOM API来改变HTML元素的内容、样式或者添加新的元素,实现动态网页效果。 JavaScript还有异步编程的概念,如回调函数、Promise和async/await。这些...

    JavaScript权威指南(第6版),中文+英文+源码

    DOM(文档对象模型)是JavaScript与网页内容交互的主要接口,书中有详细阐述如何使用JavaScript操作HTML元素,如添加、删除、修改元素,以及处理DOM事件。此外,XMLHttpRequest和现代的fetch API用于实现AJAX(异步...

    JavaScript实例教程(经典的JS入门教程) pdf扫描版(带书签)

    学会通过JavaScript操作DOM元素,如添加、删除、修改元素,是网页动态化的关键。 6. **AJAX**:异步JavaScript和XML,虽然现在更多使用JSON,但其原理——在不刷新整个页面的情况下,与服务器交换数据并更新部分...

    107个常用Javascript语句参数写法

    JavaScript中的行内注释使用双斜杠`//`,用于添加对代码的说明,提高代码可读性。 ### 3. HTML文档结构 传统HTML文档的基本结构包括`<html>`标签下的`<head>`和`<body>`部分,其中`<head>`用于存放文档的元数据,...

Global site tag (gtag.js) - Google Analytics