原创作者: vb2005xu
阅读:1393次
评论:0条
更新时间:2011-05-26
之前写过 iamseseJS和__xu_init jS简易框架 , 好长时间不看,忘了,郁闷,今天要用个DOM事件做东西,平常都用JQ,突然发现并不需要这么大的东西,就整理了下 .... 用起来都忘了 郁闷 记个笔记,似乎事件代理有些问题,晚上回去再看了...
写道
demo 功能需要:
1. 单击行如果行未选中 则高亮当前行 并勾选 复选框,否则去掉 复选框 并且还原 原来的背景色
2. 单击复选框未选中 则高亮当前行 并勾选 复选框,否则去掉 复选框 并且还原 原来的背景色
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>
评论 共 0 条 请登录后发表评论
您还没有登录,请您登录后再发表评论