`

为指定的表单元素动态添加事件

 
阅读更多
<html>
<head>
<title></title>
 <script>
     function init(){

        var _obj = document.getElementById("ck"); 
		var d=document.getElementById("myDate");
         var args=[_obj,d];
		// _obj.onclick=function(){bb(_obj,d)} 覆盖之前的onclick函数

		 Pen.util.addEvent(_obj,"onclick",bb,args); //不会覆盖之前的onclick函数

		
	 }


function bb(){


	 if(arguments.length!=2) throw new Error("参数不正确!");
	  var obj=arguments[0];
	  var dat=arguments[1];
      
      var date=new Date();
	  var month=date.getMonth()+1;
	  var day=date.getDate();
	  if(month<10){
		month='0'+month;
	  }
	  if(day<10){
		day='0'+day;
	  }
	  var d=date.getFullYear()+"-"+month+"-"+day;
     
	  
	  if(obj.checked){
       
		 dat.value=d;
	 
	   }else{

         dat.value="";
	   }

	  

	 }


	 function aa(){
	 
	 alert()
	 
	 }



    var Pen={};
	Pen.util={

	
	/**
	 * 功能:为指定的表单元素动态添加事件
	 *@param obj 要为其添加事件的元素对象
	 *@param eventName 事件名称
	 *@param eventFunction 事件要执行的函数
	 *@param args 为函数传递的参数数组(多个参数都要放在args数组里面)
	*/
	addEvent:function(obj,eventName,eventFunction,args){
  
       
        if(window.addEventListener) //firefox浏览器
		{    
		
			obj .addEventListener(eventName,function(){ exeFunc(eventFunction,args)}, false);    
		
		} 
		else //IE浏览器
		{     
	 
			obj.attachEvent(eventName,function(){ exeFunc(eventFunction,args)});    
		
		} 

    

	 }




};

   var  exeFunc=function(eventFunction,args){

    if(args==undefined || args.length==0)  eventFunction();
	else if(args.length==1) eventFunction(args[0]);
	else if(args.length==2) eventFunction(args[0],args[1]);
	else if(args.length==3) eventFunction(args[0],args[1],args[2]);
	else if(args.length==4) eventFunction(args[0],args[1],args[2],args[3]);
	else if(args.length==5) eventFunction(args[0],args[1],args[2],args[3],args[4]);
	else if(args.length==6) eventFunction(args[0],args[1],args[2],args[3],args[4],args[5]);
	else if(args.length==7) eventFunction(args[0],args[1],args[2],args[3],args[4],args[5],args[6]);
	else if(args.length==8) eventFunction(args[0],args[1],args[2],args[3],args[4],args[5],args[6],args[7]);
	else throw new Error("参数越界错误");


	}

 </script>
</head>
<body onload="init()">

  <input type="checkbox" id="ck" onclick="aa()">&nbsp; <input type="text" id="myDate">
</body>
</html>
分享到:
评论

相关推荐

    动态添加删除表单元素

    同时,还可以为元素添加事件监听器,比如`element.addEventListener('keyup', function() {...})`,以便在用户输入时执行特定操作。 3. 插入到DOM:最后,使用`appendChild()`或`insertBefore()`方法将新元素添加到...

    jquery动态添加表单

    `append`方法将这些元素添加到其他元素中,最后`$('body').append(form)`将整个表单添加到页面的主体部分。 对于更复杂的动态表单,可能需要监听事件,如当用户点击“添加”按钮时动态添加新字段。可以使用`on`方法...

    php实现表单的动态添加删除

    在动态添加和删除表单元素的场景中,PHP需要能够根据用户的请求动态生成或移除HTML代码。 1. **动态生成表单**:在PHP中,可以使用字符串拼接或者模板引擎(如Twig)来动态生成HTML代码。例如,你可以创建一个数组...

    jQuery添加删除表单元素代码.zip

    本资源“jQuery添加删除表单元素代码.zip”提供了一种利用jQuery动态添加和删除表单行的解决方案,主要依赖于名为"jquery.dynamic-rows"的插件。这个插件是针对那些需要在用户交互时动态管理表单元素的应用场景设计...

    jQuery表单元素动态增加删除代码.zip

    CSS和JavaScript可以协同工作,为动态添加的元素添加样式和交互。例如,可以使用CSS3动画使新添加的元素有滑入效果,或者用JavaScript检查表单元素是否为空,防止用户提交无效的数据。 总结来说,jQuery提供了一套...

    jQuery复制表单元素代码添加tr ,递交信息

    本主题聚焦于使用jQuery来动态地复制表单元素,尤其是`tr`(表格行)以便用户可以添加多行输入,同时实现信息的递交。这在创建如订单、清单或者用户填写多项数据的场景中特别实用。 首先,我们需要了解`tr`元素在...

    jQuery实现的可直接添加删除表单元素特效源码.zip

    总结,这个资源是关于使用jQuery实现动态添加和删除表单元素的示例代码,涉及到jQuery库的基本用法、DOM操作、事件处理和Ajax交互等多个重要知识点。通过学习和理解这些内容,开发者能够提升在前端开发中的动态交互...

    jQuery实现动态添加、删除按钮及input输入框的方法

    在Web前端开发中,动态地添加和删除页面元素是一种常见的交互方式,尤其在表单设计中,这种功能的实现能够极大地提升用户体验。使用jQuery库可以方便地实现这些功能,因为它提供了丰富的选择器和方法来操作DOM元素。...

    ExtJs获取表单元素的值

    在本篇文章中,我们将深入探讨如何在ExtJs框架中有效地获取表单元素的值,并结合提供的代码示例进行详细解析。对于前端开发者来说,掌握如何高效地操作表单元素是必不可少的一项技能,尤其是在使用像ExtJs这样的强大...

    jquery表格动态添加删除行代码.zip

    本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能,为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能,即在表格中动态地添加和删除行,这对于数据展示和编辑是非常实用的。 首先...

    ry复制表单元素代码.rar_airplanebqt_ry复制表单元素代码

    综上所述,这个压缩包提供的代码示例涵盖了jQuery基础操作、事件处理、表单元素操作、文本复制功能以及可能的动画效果。它为开发者提供了一种便捷的方式来实现表单元素的复制,是Web开发中实用的工具。

    jQuery复制移除表单元素代码.zip

    "jQuery复制移除表单元素代码.zip"这个资源包含了一个使用jQuery 1.7.2版本实现的功能,即动态复制和删除表单元素。以下是关于这个主题的详细知识点: 1. **jQuery基本概念**: - jQuery是John Resig于2006年创建...

    生成动态表单

    在IT领域,生成动态表单是一项重要的功能,它允许开发者根据特定需求动态创建和修改用户界面中的表单元素。这通常涉及到前端开发,尤其是JavaScript、HTML和CSS的结合使用。在给定的标题和描述中,我们可以看到这个...

    解决layui追加或者动态修改的表单元素“没效果”的问题

    在使用layui这一前端框架时,有时会遇到动态添加或修改表单元素后,这些元素无法正常显示或功能失效的问题。这个问题通常发生在使用layui Form模块进行表单操作时,因为layui的Form模块在页面加载时会一次性渲染所有...

    struts动态表单实例

    5. **JSP页面**: 在JSP页面中,你可以使用`&lt;html:form&gt;`标签来创建表单,通过指定DynaActionForm的名称,可以动态地生成表单元素。`&lt;html:dynamic&gt;`标签用于根据ActionForm的属性动态生成输入控件。 6. **控制器层...

    后台layui表单生成器代码复制即用,添加编辑一体,可条件判断

    在实际应用中,layui的表单组件提供了丰富的表单元素,如文本输入、下拉选择、日期选择、开关按钮等,并且可以方便地绑定验证规则,确保用户输入的有效性。同时,layui的API接口使得表单的事件处理变得简单,例如...

    HTML常用表单元素操作源码

    综上所述,"HTML常用表单元素操作源码"可能包含了如何创建、修改、响应这些表单元素的示例代码,涵盖了HTML结构、JavaScript动态交互和JQuery库的使用,是学习和实践Web前端开发的宝贵资源。通过学习和理解这些知识...

    jQuery表单添加

    四、动态添加和删除表单元素 7. **动态创建元素**:可以使用`$("&lt;element&gt;")`动态创建新元素,然后通过`.append()`或`.prepend()`方法将其添加到DOM中。 8. **删除元素**:`$(this).remove()`可以删除选中的元素,...

Global site tag (gtag.js) - Google Analytics