js活用事件触发对象动作


Posted in Javascript onAugust 10, 2008

从学习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应用会有非常大的帮助. 
Javascript 相关文章推荐
JavaScript 学习笔记二 字符串拼接
Mar 28 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
JS支持带x身份证号码验证函数
Aug 10 #Javascript
js获取div高度的代码
Aug 09 #Javascript
js可突破windows弹退效果代码
Aug 09 #Javascript
ext form 表单提交数据的方法小结
Aug 08 #Javascript
ext实现完整的登录代码
Aug 08 #Javascript
Javascript与flash交互通信基础教程
Aug 07 #Javascript
二级域名或跨域共享Cookies的实现方法
Aug 07 #Javascript
You might like
PHP正则的Unknown Modifier错误解决方法
2010/03/02 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
Javascript注入技巧
2007/06/22 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
cookie的secure属性详解
2015/04/08 Javascript
jQuery超简单选项卡完整实例
2015/09/26 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
angularjs实现上拉加载和下拉刷新数据功能
2017/06/12 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
20道JS原理题助你面试一臂之力(必看)
2019/07/22 Javascript
微信小程序实现抖音播放效果的实例代码
2020/04/11 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
名片管理系统python版
2018/01/11 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python实现动态添加属性和方法操作示例
2018/07/25 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
手机端用rem+scss做适配的详解
2017/11/15 HTML / CSS
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
事业单位分类改革实施方案
2014/03/21 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
领导干部遵守党的政治纪律情况思想汇报
2014/09/14 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
2014年度个人工作总结
2014/11/07 职场文书
大学生团员个人总结
2015/02/14 职场文书
环保建议书作文500字
2015/09/14 职场文书
javascript对象3个属性特征
2021/11/17 Javascript