T086学习网 | 站长学院 | 技术文档 | 成语 | 歇后语 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论 | 欣欣百宝箱

活用事件触发对象动作

【 来源:胡东平个人空间作者:胡东平 更新时间:2006-06-05 | 字体:
[导读]现在基本上我很少在对象里面写事情触发行为了,因为感觉那样做相同的对象代码利用率太低,容易导致代码冗余.从学习W3C标准以来,对于代码我好像养成了一种怪癖,能统一复用的,就不会多写一点东西,这样前台页面代码看起来...

现在基本上我很少在对象里面写事情触发行为了,因为感觉那样做相同的对象代码利用率太低,容易导致代码冗余.
从学习W3C标准以来,对于代码我好像养成了一种怪癖,能统一复用的,就不会多写一点东西,这样前台页面代码看起来会清爽很多,而效率也会成直线上升.

下面来讲一下最近一个项目里面比较有代表性的东西.
(实例可以查看这里http://www.pplive.com/zh-cn/view.html)

<script type="text/javascript">
<!--
//定义鼠标触发事件的范围
function findOutDiv(thisEvent){
//利用循环查找符合CSS样式名字的对象
 while(thisEvent.className != "piccell"){
//如果这个对象的标签名字是HTML就停止,然后让事件对象不存在,用做后面的判断
  if(thisEvent.tagName == "HTML"){
   thisEvent = false;
   break;
  }else{
//否则继续下个对象,即他的父对象
   thisEvent = thisEvent.parentNode
  }
 }
//返回事件对象,如果事件对象不存在返回假
 return thisEvent;
}
//利用鼠标在对象移动属性作为时间触发行为
document.onmouseover = function(e){
//这个e是FireFox捕捉事件触发对象的方法
 if(!e)e = window.event;
//定义Event给于鼠标触发对象的实体,即符合标准并可以控制的对象
//target为FF专用,srcElement为IE专用
 var Event = e.target?e.target:e.srcElement
//定义可控制的对象,调用鼠标触发事件范围所返回的对象
 var thisEvent = findOutDiv(Event)
//如果对象存在就继续
 if(thisEvent){
//给对象定义CSS样式
  thisEvent.style.border = "2px solid #7A99D2";
  thisEvent.style.background = "#D2E4FC";
 }
}
//同上,利用鼠标在对象移出作为时间触发行为
document.onmouseout = function(e){
 if(!e)e = window.event;
 var Event = e.target?e.target:e.srcElement
 var thisEvent = findOutDiv(Event)
 if(thisEvent){
  thisEvent.style.border = "2px solid #CCC";
  thisEvent.style.background = "#FFF";
 }
}
// -->
</script>

这样写的好处显而易见,可以不用在每个对象中写触发动作的行为,极大的节省了代码,并且JS更有可读性.
过段时间等我把个性化页面整理完成后发布出来,让大家看看利用事件触发对象动作的好处.
GOOGLE,和微软的LIVE他的个性化页面写的很不错,所以大家都可以学习一下他们的代码,这样对你将来的AJAX应用会有非常大的帮助.

  • 转载请注明来源:IT学习网 网址:http://www.t086.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。
更多
留言建议ASP探针PHP探针站长Enjoy的Blog
© 2017 T086学习网 - T086.com(原itlearner.com)
RunTime:8.76ms QueryTime:7