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 相关文章推荐
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
node.js下LDAP查询实例分享
Sep 30 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
May 16 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
Vue数据驱动模拟实现5
Jan 13 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
Sep 07 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
jQuery实现评论模块
Aug 19 jQuery
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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
PHP中防止直接访问或查看或下载config.php文件的方法
2012/07/07 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP实现微信退款功能
2018/10/02 PHP
jquery显示隐藏input对象
2014/07/21 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
div中文字内容溢出常见的解决方法
2017/03/16 Javascript
socket.io学习教程之深入学习篇(三)
2017/04/29 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
[01:03:47]VP vs NewBee Supermajor 胜者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
10行Python代码计算汽车数量的实现方法
2019/10/23 Python
python序列化与数据持久化实例详解
2019/12/20 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python调用C/C++的方法解析
2020/08/05 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
药剂专业求职信
2014/06/20 职场文书
2014最新离职证明范本
2014/09/12 职场文书
本溪水洞导游词
2015/02/11 职场文书
接待员岗位职责
2015/02/13 职场文书
高老头读书笔记
2015/06/30 职场文书
汽车销售合同文本
2019/08/08 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python
Tomcat starup.bat 脚本实现开机自启动
2022/04/20 Servers