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

Javascript
javascript 新浪背投广告实现代码
javascript 选择文件夹对话框(web)
JS 自动完成 AutoComplete(Ajax 查询)
javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
jQuery 插件开发 其实很简单
最简单的jQuery程序 入门者学习
javascript 读取xml,写入xml 实现代码
JQuery 实现的页面滚动时浮动窗口控件
javascript 动态加载 css 方法总结
javascript 表格左右收缩
jqurey 学习笔记 传智博客佟老师附详细注释
javascript dom 操作详解 js加强
JS 动态添加列表框项效果代码
Javascript 事件流和事件绑定
Google Map Api和GOOGLE Search Api整合实现代码
9个javascript语法高亮插件 推荐
Prototype String对象 学习
javascript ImgBox透明遮罩层背景图片展示
javascript FAQ函数(提问+回复)
jQuery TextBox自动完成条

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 301 ::
收藏到网摘: 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应用会有非常大的帮助.