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插件之自动添加删除行功能介绍
Oct 14 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
js控制div层的叠加简单方法
Oct 15 Javascript
js获取指定字符前/后的字符串简单实例
Oct 27 Javascript
使用原生的javascript来实现轮播图
Feb 24 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
Postman动态获取返回值过程详解
Jun 30 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
精致的人儿就要挑杯子喝咖啡
2021/03/03 冲泡冲煮
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
jquery创建div 实现代码
2009/04/27 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
2016/10/18 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
python中OrderedDict的使用方法详解
2017/05/05 Python
Python学习入门之区块链详解
2017/07/25 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
英语专业毕业生自荐信
2013/10/28 职场文书
化学教师教学反思
2014/01/17 职场文书
团代会主持词
2014/04/02 职场文书
捐资助学倡议书
2014/04/15 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
Python进行区间取值案例讲解
2021/08/02 Python