`
funzhang2010
  • 浏览: 14566 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

【学习笔记】JavaScript动态的为元素添加带参数和不带参数的事件

阅读更多

目前的的页面布局都是基于XHTML,通过DIV+CSS布局,实现DHTML的样式。所以这个JavaScript动态的为元素添加事件因此而普遍了。下面我说说怎样通过javascript为元素动态的添加事件.
Javascript为元素动态的添加事件包括两种情况:
不带参数的事件和带参数的事件
一、不带参数的事件:
两种方式:直接给对象添加事件,节点添加事件
例如给一个idtab1的添加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学习笔记的部分内容进行的详细解读,涵盖了JavaScript的基础知识、语法、数据类型、函数、对象、数组、DOM编程、AJAX以及JSON和jQuery的简介,旨在为初学者提供全面的入门指南。

    javascript学习笔记1

    ### JavaScript 学习笔记1:数组、DOM与BOM简要总结 #### 数组方法概述 在JavaScript中,数组是一种非常重要的数据结构,用于存储多个值。数组对象提供了多种方法来帮助我们操作数组中的元素。 - **pop()**:从...

    JavaScript总结笔记

    JavaScript是一种广泛使用的、基于对象和事件驱动的脚本语言。它最初由网景公司(Netscape)的布兰登·艾奇于1995年创建,并逐渐成为现代Web开发的核心技术之一。JavaScript的特点包括但不限于: - **安全性**:...

    js学习笔记

    ### JavaScript学习笔记知识点详解 #### 第一章:CSS样式表 **1.1 什么是CSS** CSS(Cascading Style Sheets)即层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。它用于定义网页上的布局、颜色、...

    jquery学习笔记附带例子

    同时,`css()`方法允许开发者动态调整元素的样式,如颜色、尺寸和位置,从而实现页面的实时更新。 #### 3. 响应用户操作与添加动态效果 jQuery内置了对事件处理的支持,使得监听用户操作(如点击、滑动、键盘输入...

    ExtJS面板学习笔记(带有运行效果)

    ### ExtJS面板学习笔记 #### 一、基础:弹出框 在ExtJS中,`Ext.MessageBox`提供了创建各种模态对话框的功能,包括提示、确认、输入等。以下是几个基本示例: 1. **简单警告对话框**: ```javascript Ext....

    JavaScript学习笔记之JS对象

    使用new Array()时,可以不带参数创建一个空数组,也可以传入一个数值参数来指定数组的长度,或者传入多个参数来创建并初始化数组。数组对象还提供了一系列的方法,如push()用于添加元素、pop()用于移除最后一个元素...

    虚幻3D丝带Canvas特效.zip

    虚幻3D丝带Canvas特效是一种在网页上实现动态视觉效果的技术,主要通过JavaScript的jQuery库和CSS3结合Canvas元素来创建。这个压缩包“虚幻3D丝带Canvas特效.zip”包含了一个名为“jiaoben7299”的文件,可能是源...

    jQuery+CSS3带日期星期圆形时钟代码.zip

    总的来说,这个"jQuery+CSS3带日期星期圆形时钟代码"是一个很好的学习案例,它结合了jQuery的便利性和CSS3的创新特性,展示了如何在网页中实现动态、交互的视觉元素。对于初学者来说,这是一个了解和实践JavaScript...

    jQuery学习笔记[1] jQuery中的DOM操作

    这篇jQuery学习笔记将重点介绍jQuery中的DOM操作,帮助初学者更好地理解和应用这一强大的工具。 首先,我们需要理解DOM的基本概念。DOM是文档对象模型(Document Object Model)的缩写,它是一个国际标准,用于表示...

    关于Vue.js一些问题和思考学习笔记(1)

    不带括号调用无参函数实际上是在模板编译时就执行了该函数,而在事件触发时只会传递结果。带括号则会在事件触发时执行函数。 总之,Vue.js在数据绑定、属性管理和函数调用等方面都有其特定的规则和最佳实践。理解和...

    带悬停效果的Alert弹窗插件.rar

    jQuery的`.hover()`函数可以轻松实现这一功能,它接受两个参数,分别定义鼠标进入和离开元素时执行的函数。 2. **CSS特效**: CSS(层叠样式表)用于控制网页的布局和外观。在"带悬停效果的Alert弹窗插件"中,CSS...

    12种网站图片展示带悬停效果.rar

    这些特效利用了JavaScript库jQuery和CSS(层叠样式表)技术,旨在为用户提供动态视觉体验,同时保持页面加载速度的优化。 首先,我们来了解一下jQuery。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML...

    redis-笔记

    Redis是一种高性能的键值对数据库,常用于存储缓存、会话管理、发布订阅...综上所述,Redis笔记涵盖了Redis的基础知识,是学习和使用Redis的重要参考资料,通过实践这些操作和配置,可以更好地利用Redis解决实际问题。

    jQuery borainTimeChoice日期时间选择插件.zip

    jQuery BorainTimeChoice是一款基于jQuery库的日期时间选择插件,专为网页界面设计,用于提供用户友好的日期和时间输入交互。这个插件在网页表单中添加了一个直观的弹出日历,使得用户能够方便地选择日期和时间,...

    jQuery数字格式化分隔符代码.zip

    通常,我们会创建一个函数,接收一个数字作为参数,然后返回带有千分位分隔符的格式化字符串。例如,函数可以使用`replace()`方法配合正则表达式,将每三位数字插入一个逗号,从而达到分隔效果。如果包含jQuery插件...

    jQuery必知必会:老程序员手把手带您完成一个【MyNotes】Web前端项目

    《jQuery必知必会:老程序员手把手带您完成一个【MyNotes】Web前端项目》是一门深入浅出的IT课程,旨在引导学习者全面掌握jQuery技术并实践于实际项目中。jQuery作为一款广泛使用的JavaScript库,极大地简化了网页...

    introducao-ao-kotlin:最终完成锻炼

    - Kotlin允许为已有的类添加新功能,而无需继承或使用装饰者模式。 4. **高阶函数与lambda表达式**: - 高阶函数可以接受函数作为参数或返回函数。例如,`map`函数接受一个函数作为参数,对集合中的每个元素应用...

Global site tag (gtag.js) - Google Analytics