`

Kenxu Events.js 使用

阅读更多

之前写过 iamseseJS和__xu_init jS简易框架 , 好长时间不看,忘了,郁闷,今天要用个DOM事件做东西,平常都用JQ,突然发现并不需要这么大的东西,就整理了下 .... 用起来都忘了 郁闷 记个笔记,似乎事件代理有些问题,晚上回去再看了...

 

写道
demo 功能需要:

1. 单击行如果行未选中 则高亮当前行 并勾选 复选框,否则去掉 复选框 并且还原 原来的背景色
2. 单击复选框未选中 则高亮当前行 并勾选 复选框,否则去掉 复选框 并且还原 原来的背景色
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kenxu Event.js 使用demo</title>
<script type="text/javascript">

var Events = {
	
	onload: function(func){
		var one=window.onload ;
		if(typeof window.onload != 'function'){
			window.onload=func ;
		}
		else{
			window.onload=function(){
				one();
				func();
			}
		}
	} ,
	
	/*
	 * 为DOM元素 添/删事件 add,remove方法 摘自: jsTrace
	 *  
	 *  当fn为匿名函数时移除不成功,fn可接收event参数,如: function(evt)
	 */ 
	add: function( obj, type, fn ){
		if (obj.addEventListener) obj.addEventListener( type, fn, false );
		else if (obj.attachEvent){
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() {
				obj["e"+type+fn]( window.event );
			};
			obj.attachEvent( "on"+type, obj[type+fn] );
		}
	} ,
	remove: function ( obj, type, fn ){
		if (obj.removeEventListener) obj.removeEventListener( type, fn, false );
		else if (obj.detachEvent) {
			obj.detachEvent( "on"+type, obj[type+fn] );
			obj[type+fn] = null;
			obj["e"+type+fn] = null;
		}
	} ,
	
	/**
	 * 使用事件监听器后,取消元素默认行为的方法
	 * @param evt||window.event evt
	 */		
	preventDefault: function(evt){
		evt = evt || window.event ;
		if (evt.preventDefault)
			evt.preventDefault();
		else
			evt.returnValue = false ;
	} ,	
	
	/**
	 * 使用事件监听器后,取消元素上层元素的事件冒泡
	 * @param evt||window.event evt
	 */		
	preventBubble: function(evt){
		evt = evt || window.event ;
		if (evt.stopPropagation)
			evt.stopPropagation();
		else
			evt.cancelBubble = true ;
	} ,	
		
	/**
	 * 事件委托 机制 -- 从上层元素捕捉事件源,并传到回调函数 
	 * 
	 * 兼容IE和FF
	 * @param DOM元素	proxyElement 
	 * @param string	type
	 * @param function	fn 传入参数为事件源对象
	 * @param bool		isPreventDefault 是否阻止元素的默认行为
	 */ 
	addProxy: function(proxyElement,type,fn,isPreventDefault){
		var handle_name = type + '_handleMethod' ;
		var _this = this ;
		proxyElement[handle_name] = function(evt){
			evt = evt || window.event ;
			var target = evt.target || evt.srcElement ;
			fn(target);
			if (isPreventDefault) _this.preventDefault(evt);
		} ; 
		this.add(proxyElement,type,proxyElement[handle_name]);
	},
	/**
	 * 移除 proxyElement的委托事件
	 * 
	 * @param DOM元素	proxyElement
	 * @param string	type
	 */
	removeProxy: function(proxyElement,type){
		var handle_name = type + '_handleMethod' ;
		this.remove(proxyElement,type,proxyElement[handle_name])
	} ,
	
	keyCode: function(evt){
		return (evt || window.event).keyCode ;
	} ,
	each: function(ar, insp) {
		var r = [];
		for (var i = 0; i < ar.length; i++) {
			var x = insp(ar[i], i);
			if (x !== null) {
				r.push(x);
			}
		}
		return r ;
	}
} ;

Events.onload(function(){
	var tbodyEle=document.getElementById('tbody');
	if (tbodyEle){
		var color1='#EDEDD3',color2='#EFEFEF',overcolor='#D8D7D2';
		var bgc = 'backgroundColor' ;
		
		Events.each(tbodyEle.rows,function(row,i){
			// 设置背景颜色
			row.style[bgc] = (i%2 == 0) ? color1 : color2;
			
			// 绑定特效事件
			Events.add(row,'mouseover',function(evt){
				this.bg_old=this.style[bgc] ;
				this.style[bgc]=overcolor;
				this.style['cursor']='hand';				
			});
			Events.add(row,'mouseout',function(evt){
				this.style[bgc]=this.bg_old;
			});			
			
			var boxes = row.getElementsByTagName('input');
			var pkbox = boxes && boxes[0].type=='checkbox' && boxes[0].name=='pk' ? boxes[0] : null ;
			
			// 绑定点击事件			
			if (pkbox){				
			
				Events.add(pkbox,'click',function(evt){
					Events.preventBubble(evt);
					if(this.checked){
						//row的mouseover事件
						row.bg_unslt = row.bg_old ; 
						row.bg_old=row.style[bgc]=overcolor ;						
					}else {
						//row的mouseout事件
						row.bg_old=row.style[bgc]=row.bg_unslt ;
					}
				});				
				
				Events.add(row,'click',function(evt){
					pkbox.checked = !pkbox.checked ;					
					if(pkbox.checked){
						this.bg_unslt = this.bg_old ; 
						this.bg_old=this.style[bgc]=overcolor ;						
					}else {
						this.bg_old=this.style[bgc]=this.bg_unslt ;
					}
				});
			}			
			
		});
		
	}
});
</script>
</head>
<body id="" class="">
<table width="100%" border="0" cellspacing="1" cellpadding="4" class="list">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody id='tbody'>
    <tr>
      <td><input type="checkbox" name="pk" value="1"></td>
      <td>无</td>
      <td>2008-05-09 17:21:04</td>
    </tr>
    <tr>
      <td><input type="checkbox" name="pk" value="2"></td>
      <td>无</td>
      <td>2008-05-09 17:21:04</td>
  
    </tr>
    <tr>
      <td><input type="checkbox" name="pk" value="3"></td>
      <td>无</td>
      <td>2008-05-09 17:21:04</td>
     
    </tr>
  </tbody>
</table>
</body>
</html>

 

 

分享到:
评论
2 楼 vb2005xu 2010-10-21  
加一个数据库支持的代码样例

class Kenxu_DB_Driver_Mysqlt extends Kenxu_DB_Driver_Mysql implements Kenxu_DB_TransactionSupport {
	
	/**
     * 指示数据库是否支持事务
     *
     * @var boolean
     */
    protected $_hasTransaction = true ;
    
	/**
     * Mysql 数据库事务支持类名
     *
     * @var string
     */
	protected $_transactionSupportClass = 'Kenxu_DB_Driver_Mysql_TransactionSupport' ;
	
	/**
	 * 获取数据库事务支持对象
	 *
	 * @return Kenxu_DB_Driver_Mysql_TransactionSupport
	 */
	function getTransaction(){
		if ( $this->_hasTransaction ){
			static $inst = null ;
		
			if (!$inst){
				$inst = Kenxu_DB_TransactionAdapter::getInstance($this->_transactionSupportClass) ;
				/* @var $inst Kenxu_DB_TransactionAdapter */
				$inst->setDBO($this);
			}
			return $inst ;
		}		
		return null ;		
	}
	
}
1 楼 vb2005xu 2010-10-19  
兼容IE/FF

相关推荐

    远程debug流程,方便debug

    远程debug流程,方便debug

    基于麻雀生物特性的搜索算法(SSA)的Matlab实现:原理、代码与实战应用,基于圈养麻雀特性的搜索算法(SSA)matlab实现:原理、代码与警觉机制解析,麻雀搜索算法(SSA)的matlab实现

    基于麻雀生物特性的搜索算法(SSA)的Matlab实现:原理、代码与实战应用,基于圈养麻雀特性的搜索算法(SSA)matlab实现:原理、代码与警觉机制解析,麻雀搜索算法(SSA)的matlab实现 原创代码,注释清晰,可直接运行 研究表明,圈养的麻雀存在两种不同类型:发现者和加入者。 发现者在种群中负责寻找食物并为整个麻雀种群提供觅食区域和方向,而加入者则是利用发现者来获取食物。 在生活中我们仔细观察会发现,当群体中有麻雀发现周围有捕食者时,此时群体中一个或多个个体会发出啁啾声,一旦发出这样的声音整个种群就会立即躲避危险,进而飞到其它的安全区域进行觅食。 这样的麻雀被称为警觉者。 麻雀搜索算法就是利用麻雀的这种生物特性进行迭代寻优的优化算法。 本资源包含以下三部分内容: 1.麻雀搜索算法的基本原理(两篇参考文献),非常适合用来学习。 2.麻雀搜索算法的matlab代码,注释详细,结构清晰。 3.五个群智能优化算法常用的测试函数。 ,麻雀搜索算法(SSA); MATLAB实现; 原创代码; 注释清晰; 可直接运行; 生物特性迭代寻优; 发现者与加入者; 警觉者; 参考两篇文献。

    基于java的五子棋游戏设计源码+论文

    基于java的五子棋游戏设计源码+论文

    deepseek-r1使用指南

    deepseek-r1使用指南

    DeepSeek+DeepResearch-让科研像聊天一样简单

    DeepSeek+DeepResearch——让科研像聊天一样简单 (1)DeepSeek如何做数据分析? (2)DeepSeek如何分析文件内容? (3)DeepSeek如何进行数据挖掘? (4)DeepSeek如何进行科学研究? (5)DeepSeek如何写综述? (6)DeepSeek如何进行数据可视化? (7)DeepSeek如何写作润色? (8)DeepSeek如何中英文互译? (9)DeepSeek如何做降重? (10)DeepSeek论文参考文献指令 (11)DeepSeek基础知识。

    基于dlib及opencv的人脸识别.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    基于人工智能的目标检测应用.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行;功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    DSP28335通过SPI与AD7606八路信号采集与通信的实践:实时数值与波形展示在上位机界面上,DSP28335与AD7606 SPI通信:采集八路信号并通过SCI上送至上位机实现数据及波形显示

    DSP28335通过SPI与AD7606八路信号采集与通信的实践:实时数值与波形展示在上位机界面上,DSP28335与AD7606 SPI通信:采集八路信号并通过SCI上送至上位机实现数据及波形显示,Dsp28335利用spi与ad7606通信,采集八路信号,通过sci发送到到上位机显示数值和波形 ,DSP28335; SPI; AD7606; 八路信号采集; SCI; 上位机显示; 数值和波形,DSP28335 SPI通讯 AD7606 八路信号采集 SCI发送上位机显示

    搭建mario机器学习测试系统,进行机器学习。.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    marisa-ruby-0.2.4-4.el7.x64-86.rpm.tar.gz

    1、文件内容:marisa-ruby-0.2.4-4.el7.rpm以及相关依赖 2、文件形式:tar.gz压缩包 3、安装指令: #Step1、解压 tar -zxvf /mnt/data/output/marisa-ruby-0.2.4-4.el7.tar.gz #Step2、进入解压后的目录,执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持:公众号禅静编程坊

    基于Tent混沌映射的麻雀搜索算法优化:提高全局搜索能力与初始解质量,基于Tent混沌映射的麻雀搜索算法优化:提高全局搜索能力与初始解质量,基于Tent混沌映射的麻雀搜索算法matlab代码: 针对麻

    基于Tent混沌映射的麻雀搜索算法优化:提高全局搜索能力与初始解质量,基于Tent混沌映射的麻雀搜索算法优化:提高全局搜索能力与初始解质量,基于Tent混沌映射的麻雀搜索算法matlab代码: 针对麻雀搜索算法(SSA)在接近全局最优时,种群多样性减少,易陷入局部最优解等问题,提出了一种混沌麻雀搜索优化算法(CSSA)。 通过改进 Tent 混沌序列初始化种群,提高初始解的质量,增强算法的全局搜索能力; ,基于Tent混沌映射的麻雀搜索算法; CSSA(混沌麻雀搜索优化算法); Tent混沌序列初始化种群; 全局搜索能力。,基于Tent混沌映射的CSSA算法:提高麻雀搜索全局搜索能力

    JavaWeb期刊管理系统_课程设计附课设报告.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    上接战略下接绩效的培训规划.pptx

    上接战略下接绩效的培训规划.pptx

    基于S7-300 PLC和Wincc Flexible触摸屏的温室大棚智能控制解决方案:梯形图程序详解、接线与原理图图谱及组态设计,基于S7-300 PLC与Wincc Flexible触摸屏的温室大

    基于S7-300 PLC和Wincc Flexible触摸屏的温室大棚智能控制解决方案:梯形图程序详解、接线与原理图图谱及组态设计,基于S7-300 PLC与Wincc Flexible触摸屏的温室大棚智能控制解决方案:梯形图程序、接线图与组态画面全解析,No.943 基于S7-300 PLC和Wincc Flexible触摸屏温室大棚控制 带解释的梯形图程序,接线图原理图图纸,io分配,组态画面 ,943; S7-300 PLC; Wincc Flexible触摸屏; 温室大棚控制; 梯形图程序; 接线图原理图; IO分配; 组态画面,S7-300 PLC与Wincc Flexible触摸屏联合打造:No.943温室大棚控制系统的设计与实现

    基于ADMM算法的GAMS程序:发电商竞标策略模型及其应用解析,GAMS程序解析:基于ADMM算法的发电商竞标策略优化模型与代码实现,GAMS程序:ADMM算法-基于ADMM法的发电商竞标策略 本程序

    基于ADMM算法的GAMS程序:发电商竞标策略模型及其应用解析,GAMS程序解析:基于ADMM算法的发电商竞标策略优化模型与代码实现,GAMS程序:ADMM算法-基于ADMM法的发电商竞标策略 本程序主要介绍ADMM算法在GAMS中的编写方式,模型基于发电商竞标策略进行编写,基本包含了文章中的模型,但并非完全复现,可作为参考程序自学使用,也可在程序的基础上进行修改使用。 需要的同学可根据以下图片研究是否为自己需要的程序进行。 也可提供ADMM部分程序。 程序包括两个,分别为解决战略投资问题的广义MILP制定的GAMS代码、基于提出的共识- admm算法解决战略投资问题的GAMS代码 ,GAMS程序; ADMM算法; 发电商竞标策略; 模型编写; 广义MILP; 共识-ADMM算法; 战略投资问题; 程序修改。,GAMS程序:ADMM算法在发电商竞标策略中的应用示例

    springboot整合Quartz实现动态配置定时任务.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    重庆市农村信用合作社 农商行数字银行系统建设方案.ppt

    重庆市农村信用合作社 农商行数字银行系统建设方案.ppt

    三菱FX5U定位模块与昆仑通态触摸屏包装机配置程序集成:五轴控制及双轴插补技术,三菱FX5U定位模块与伺服系统控制:包装机配置清单及功能分配手册,三菱 FX5U定位模块5轴 2轴插补伺服 包括三菱FX

    三菱FX5U定位模块与昆仑通态触摸屏包装机配置程序集成:五轴控制及双轴插补技术,三菱FX5U定位模块与伺服系统控制:包装机配置清单及功能分配手册,三菱 FX5U定位模块5轴 2轴插补伺服 包括三菱FX5U伺服5轴程序2轴插补,昆仑通态触摸屏程序。 包装机程序,有详细配置清单 IO表 功能分配等清单 扩展FX5-16ET-ES-H定位,有定位设置说明 ,三菱FX5U;定位模块;5轴;2轴插补伺服;昆仑通态触摸屏程序;包装机程序;配置清单;IO表;功能分配;扩展FX5-16ET-ES-H定位设置。,三菱FX5U定位模块:5轴伺服控制与2轴插补程序包

    机器学习课程设计——基于AdaBoost的银行用户逾期行为检测.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行;功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    恶性肿瘤骨转移临床诊疗专家共识总论要点解读.pptx

    恶性肿瘤骨转移临床诊疗专家共识总论要点解读.pptx

Global site tag (gtag.js) - Google Analytics