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 相关文章推荐
用jQuery模拟页面加载进度条的实现代码
Dec 19 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
一行命令搞定node.js 版本升级
Jul 20 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
React Form组件的实现封装杂谈
May 07 Javascript
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
JavaScript私有变量实例详解
Jan 24 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
PHP4实际应用经验篇(4)
2006/10/09 PHP
php 图像函数大举例(非原创)
2009/06/20 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
php中请求url的五种方法总结
2017/07/13 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
js函数调用的方式
2014/05/06 Javascript
Node.js实现在目录中查找某个字符串及所在文件
2014/09/03 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
jQuery带时间的日期控件代码分享
2015/08/26 Javascript
NodeJS创建基础应用并应用模板引擎
2016/04/12 NodeJs
jQuery动态移除和添加背景图片的方法详解
2017/03/07 Javascript
Angularjs 实现移动端在线测评效果(推荐)
2017/04/05 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
详解vue-router传参的两种方式
2018/09/10 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
Node.js+Express+Mysql 实现增删改查
2019/04/03 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
python抓取百度首页的方法
2015/05/19 Python
python图像处理之镜像实现方法
2015/05/30 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
软件项目实施计划书
2014/05/02 职场文书
查摆问题对照检查材料
2014/08/28 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
交通事故代理词范文
2015/05/23 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
数学复习课教学反思
2016/02/18 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
解决SpringCloud Feign传对象参数调用失败的问题
2021/06/23 Java/Android
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技