`

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

相关推荐

    Java基于springboot+vue的校园自助洗衣服务管理系统的设计与实现.rar

    【基于Springboot+Vue的设计与实现】高分通过项目,已获导师指导。 本项目是一套基于Springboot+Vue的管理系统,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。也可作为课程设计、期末大作业 包含:项目源码、数据库脚本、开发说明文档、部署视频、代码讲解视频、全套软件等,该项目可以直接作为毕设使用。 项目都经过严格调试,确保可以运行! 环境说明: 开发语言:Java 框架:springboot,mybatis JDK版本:JDK1.8 数据库:mysql 5.7数据库工具:Navicat11开发软件:eclipse/idea Maven包:Maven3.3

    广义表的基本操作与高级功能

    这份资料详细介绍了广义表(Generalized List)这一重要的数据结构。广义表是一种递归数据结构,其元素可以是原子(基本数据类型,如数字、字符)或者子表(另一个广义表),具有灵活性和递归性的特点。 资料主要包含七个部分:基本概念介绍、表示方法、存储结构、基本操作、高级操作、应用场景和优化策略。在基本操作部分,详细讲解了创建、遍历、插入、删除等功能的具体实现,每个操作都配有完整的C语言代码示例。在应用场景部分,展示了广义表在表示嵌套表达式、树结构和多层嵌套数据等实际场景中的应用。针对实现过程中可能遇到的内存管理、递归效率、栈溢出等问题,资料也提供了相应的优化策略和解决方案。

    舷侧和端射天线阵列辐射方向图 matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    图引擎模块(GE)是MindSpore的一个子模块,其代码由C++实现,前端和 Ascend 处理器之间的连接链接模块

    图引擎模块(GE)是MindSpore的一个子模块,其代码由C++实现,位于前端模块ME和底层硬件之间,起到承接作用。图引擎模块以ME下发的图作为输入,然后进行一系列的深度图优化操作,最后输出一张可以在底层硬件上高效运行的图。GE针对昇腾AI处理器的硬件结构特点,做了特定的优化工作,以此来充分发挥出昇腾AI处理器的强大算力。在进行模型训练/推理时,GE会被自动调用而用户并不感知。GE主要由GE API和GE Core两部分组成

    校园数字化图书馆系统 JAVA毕业设计 源码+数据库+论文+启动教程(SpringBoot+Vue.JS).zip

    校园数字化图书馆系统 JAVA毕业设计 源码+数据库+论文+启动教程(SpringBoot+Vue.JS) 项目启动教程:https://www.bilibili.com/video/BV1jKDjYrEz1

    matplotlib图例指南.pdf

    matplotlib图例指南

    大学生创业-JAVA-基于springboot+vue的大学生创业项目的信息管理系统

    大学生创业-JAVA-基于springboot+vue的大学生创业项目的信息管理系统

    2024中国数据安全企业全景图和典型数据安全产品案例集

    2024年11月,中国电子信息产业发展研究院(赛迪研究院)、中国软件评测中心(工业和信息化部软件与集成电路促进中心)和FreeBuf咨询共同发布《2024年中国数据安全企业全景图》及典型数据安全产品案例集。

    Java基于springboot+vue的校园二手商品交易系统设计与实现.rar

    【基于Springboot+Vue的设计与实现】高分通过项目,已获导师指导。 本项目是一套基于Springboot+Vue的管理系统,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。也可作为课程设计、期末大作业 包含:项目源码、数据库脚本、开发说明文档、部署视频、代码讲解视频、全套软件等,该项目可以直接作为毕设使用。 项目都经过严格调试,确保可以运行! 环境说明: 开发语言:Java 框架:springboot,mybatis JDK版本:JDK1.8 数据库:mysql 5.7数据库工具:Navicat11开发软件:eclipse/idea Maven包:Maven3.3

    Java基于springboot+vue的高校毕业生实习及就业去向信息管理系统.rar

    【基于Springboot+Vue的设计与实现】高分通过项目,已获导师指导。 本项目是一套基于Springboot+Vue的管理系统,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。也可作为课程设计、期末大作业 包含:项目源码、数据库脚本、开发说明文档、部署视频、代码讲解视频、全套软件等,该项目可以直接作为毕设使用。 项目都经过严格调试,确保可以运行! 环境说明: 开发语言:Java 框架:springboot,mybatis JDK版本:JDK1.8 数据库:mysql 5.7数据库工具:Navicat11开发软件:eclipse/idea Maven包:Maven3.3

    (源码)基于TreasureHunt项目的户外寻宝游戏系统.zip

    # 基于TreasureHunt项目的户外寻宝游戏系统 ## 项目简介 TreasureHunt是一个旨在鼓励户外活动的寻宝游戏系统。该系统包括一个或多个宝藏和一个寻宝设备(猎手)。通过此项目,参与者可以在户外享受寻找宝藏的乐趣。 ## 项目的主要特性和功能 1. 宝藏与猎手交互猎手设备能够检测并追踪附近的宝藏。 2. 真实距离估算通过WiFi信号估算宝藏与猎手之间的距离。 3. 3D打印的抛物面反射器用于增强猎手设备的信号接收能力。 4. 丰富的用户界面提供详细的操作指南和指示,帮助用户更好地使用该系统。 5. 测试与实验项目中还包括对如何通过WiFi计算距离的尝试和文档记录。 6. 多重库支持项目使用了多个库,如Adafruit SSD1306、Adafruit GFX Library、Adafruit BusIO等,以实现各项功能。 ## 安装使用步骤

    在硅谷企业工程师领导力导师道路上的一些观察和思考.pdf

    在硅谷企业工程师领导力导师道路上的一些观察和思考.pdf

    Java基于springboot+vue的在线车辆租赁信息管理系统的设计与实现.rar

    【基于Springboot+Vue的设计与实现】高分通过项目,已获导师指导。 本项目是一套基于Springboot+Vue的管理系统,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的Java学习者。也可作为课程设计、期末大作业 包含:项目源码、数据库脚本、开发说明文档、部署视频、代码讲解视频、全套软件等,该项目可以直接作为毕设使用。 项目都经过严格调试,确保可以运行! 环境说明: 开发语言:Java 框架:springboot,mybatis JDK版本:JDK1.8 数据库:mysql 5.7数据库工具:Navicat11开发软件:eclipse/idea Maven包:Maven3.3

    jquery+css3实现的小狗绕地球奔跑动态404页面错误代码.zip

    jquery+css3实现的小狗绕地球奔跑动态404页面错误代码

    使用惠更斯球面卷积的自由空间传播函数Matlab代码.rar

    1.版本:matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

    java青协志愿服务管理系统源码数据库 MySQL源码类型 WebForm

    Java青协志愿服务管理系统源码 前台技术 JSP(css,js,ajax,el,java) 项目技术 Struts+srping+Hibernate Struts 控制器(负责接收据+处理数据+响应结果(重定向+转)) Spring 工厂类 Hibernate 持久性访问层 log4j.properties 日志文件 *.properties配置文件 Struts.xml 配置action WebRoot根目录 fckeditor在线编辑器, images img 图片 upload,updown 上传下载, admin common 前台JSP页面 WEB-INF (lib+jsp+*.xml) applicationContext.xml 中心配置文件 web.xml 项目配置文件 项目一些基本配置参数

    C#ASP.NET中小企业仓库管理系统源码数据库 SQL2008源码类型 WebForm

    ASP.NET中小企业仓库管理系统源码 源码包含三层代码生成器、数据库设计和表字段说明等。其中包括代码生成器和数据库设计.CDM字段说明 菜单功能 1、入库管理:物品入库管理、入库退货管理、入库结算管理 2、出库管理:物品出库管理、出库结算管理 3、查询统计:物品入库查询、物品出库查询、入库退货查询、入库结算查询、出库结算查询、出库排行榜查询 4、库存管理:库存统计、在库资金统计、库存预警管理 5、基础信息管路:类别管理、物品管理、供应商管理 6、系统设置:管理员管理、操作员管理、用户权限管理 7、密码修改 8、退出系统

    ioDraw-v3.1.0-mac-x64.dmg,流程图、思维导图、甘特图绘制软件,macOS x64版

    1、ioDraw 是免费的在线作图软件,用于制作流程图、思维导图、甘特图、白板手绘图、mermaid流程图、海报设计、折线图、柱状图、拓扑图、组织结构图、UML、ER和时序图、平面设计图、电子电路图等,无需注册即可使用 2、替代Visio的免费软件,无使用限制 3、适合程序员、白领、系统架构师、项目经理、平面设计师、产品经理使用 4、v3.1.0变更日志: 新增将文件保存到百度网盘。 新增对macOS的支持。 修复第三方平台文件列表页显示问题。

    yolo算法-摩托车辆计数数据集-282张图像带标签-骑手.zip

    yolo系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值

    这是来自于的c++考试题目

    这是来自于的c++考试题目

Global site tag (gtag.js) - Google Analytics