当前位置: 首页 > 图文教程 > 网络编程 > Javascript > js活用事件触发对象动作

Javascript
QQ邮箱的一个文本编辑器代码
Z-Blog中用到的js代码
绝对经典的滑轮新闻显示(javascript+css)实现
用js实现的仿sohu博客更换页面风格(简单版)
仿Vista进程条效果
用Javascript判断图片是否存在,不存在则显示默认图片的代码
用JQuery 实现的自定义对话框
jQuery使用手册之三 CSS操作
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
贴图转换+转贴工具用到的js代码超级推荐
超级简单的图片防盗(HTML),好用
现代 javscript 编程 资料
超级可爱纯js网页时钟
Dojo之路:如何利用Dojo实现Drag and Drop效果
AJAX架构之Dojo篇
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
使用prototype.js 的时候应该特别注意的几个问题.
一个已封装好的漂亮进度条
漂亮的widgets,支持换肤和后期开发新皮肤
用javascript实现的仿Flash广告图片轮换效果

Javascript 中的 js活用事件触发对象动作


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 349 ::
收藏到网摘: n/a

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

<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应用会有非常大的帮助.