目前的的页面布局都是基于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中,动态添加事件是常见的需求,尤其是在处理用户交互和实现响应式功能时。然而,由于不同浏览器对事件处理方式的差异,这通常涉及到浏览器兼容性问题。本文将详细介绍几种在JavaScript中动态添加事件的...
"动态加载带参数的ASCX用户控件"是这个过程的一种高级应用,它涉及到在页面生命周期的不同阶段向页面中添加ASCX控件,并且能够传递参数以定制其行为。下面我们将详细探讨这个主题。 首先,用户控件(ASCX)是ASP...
在标准模式下,IE8及以下版本不支持通过`setAttribute`直接为元素添加事件监听器,这与现代浏览器如Chrome和Firefox存在差异。为了确保兼容性,通常推荐使用`addEventListener`方法为元素添加事件监听器,但由于IE8...
JavaScript是一种广泛应用于Web开发的脚本语言,尤其在前端领域,它被用来为网页增加交互性和动态效果。在这个场景中,我们关注的是如何使用JavaScript在网页背景上添加水印效果。"watermark.js"文件很可能就是一个...
在给定的代码示例中,我们看到了一个利用JavaScript动态创建复选框并为每个复选框添加事件处理程序的过程。这个过程涉及到了DOM操作、事件绑定以及字符串处理等关键知识点。 ### 一、动态创建DOM元素 在代码片段中...
虽然它们通常用于创建静态页面,但也可以通过添加参数来实现动态交互。在HTML中加入参数,可以使静态页面具备处理用户输入或与服务器进行数据交换的能力,这在很多场景下是非常实用的。 在描述中提到的"html后带...
在了解动态创建表格及添加数据的过程中,首先我们要了解的是JavaScript的基础语法和DOM操作。JavaScript是一种动态的脚本语言,能够对网页上的元素进行动态的操作和修改。而DOM(文档对象模型)是一个跨平台和语言的...
### JavaScript 获取URL参数和去除字符串前后空格的方法 在日常的Web开发中,经常会遇到需要获取URL中的参数或处理字符串的情况。例如,在用户点击某个链接或者表单提交后,我们可能需要从URL中提取出某些特定的...
2. **DOM操作**:DOM(Document Object Model)是HTML和XML文档的结构化表示,JavaScript通过DOM可以操作网页元素,如获取元素、修改元素内容、添加或删除元素,以及改变样式等。 3. **事件处理**:JavaScript通过...
JavaScript是一种广泛应用于Web开发的脚本语言,它主要在客户端运行,为网页添加交互性,使得用户能够与页面进行动态沟通。"Head First JavaScript"是一本面向初学者的优秀教材,旨在通过直观、易懂的方式教授...
最后,通过闭包(IIFE)解决循环中变量共享问题,实现为每个节点绑定带有不同参数的事件处理函数。 这种技术不仅能够提升网页的交互性,还能够根据用户的操作来动态地改变网页元素的样式或内容。在实际应用中,这...
JavaScript,一种广泛应用于Web开发的脚本语言,是创建动态网页和交互式用户体验的核心工具。作为初学者,了解JavaScript的基本概念、语法以及它在实际应用中的作用至关重要。 1. **JavaScript简介** JavaScript是...
创建数组的三种方式包括不带参数的新建空数组,指定数组长度,以及直接初始化包含元素的数组。数组的`length`属性用于获取或设置数组的元素数量。`Array`对象还提供了多种内置方法,如`concat()`用于合并数组,`join...
文档对象模型(DOM)是JavaScript中与页面内容进行交互的核心,书中介绍了DOM的结构,如何使用JavaScript来访问和修改DOM,以及动态创建和操作DOM元素等。 事件处理是构成网页交互性的另一个重要方面。作者会带领...
书中会介绍如何选择元素、添加和删除节点,以及如何修改元素的属性和样式。 6. **BOM与事件处理**:浏览器对象模型(BOM)让JavaScript可以访问浏览器特性,如窗口、历史、存储等。事件处理是JavaScript实现用户...
这一章将介绍如何使用JavaScript来查找、修改和添加DOM元素,从而实现动态网页效果。 第六章:事件处理 事件是用户与网页交互的触发点,如点击按钮或滚动页面。本章将讲解如何绑定和处理事件,以及使用事件委托等...
DOM(Document Object Model)操作也是重点,JavaScript可以通过DOM API来改变HTML元素的内容、样式或者添加新的元素,实现动态网页效果。 JavaScript还有异步编程的概念,如回调函数、Promise和async/await。这些...
DOM(文档对象模型)是JavaScript与网页内容交互的主要接口,书中有详细阐述如何使用JavaScript操作HTML元素,如添加、删除、修改元素,以及处理DOM事件。此外,XMLHttpRequest和现代的fetch API用于实现AJAX(异步...
学会通过JavaScript操作DOM元素,如添加、删除、修改元素,是网页动态化的关键。 6. **AJAX**:异步JavaScript和XML,虽然现在更多使用JSON,但其原理——在不刷新整个页面的情况下,与服务器交换数据并更新部分...
JavaScript中的行内注释使用双斜杠`//`,用于添加对代码的说明,提高代码可读性。 ### 3. HTML文档结构 传统HTML文档的基本结构包括`<html>`标签下的`<head>`和`<body>`部分,其中`<head>`用于存放文档的元数据,...