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中callee与caller的用法和应用场景
Dec 08 Javascript
JS实现简单的顶部定时关闭层效果
Jun 15 Javascript
javascript实现表格增删改操作实例详解
May 15 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
js实现漫天星星效果
Jan 19 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
在Vue mounted方法中使用data变量详解
Nov 05 Javascript
JS实现商品橱窗特效
Jan 09 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迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
延时加载JavaScript代码提高速度
2015/12/27 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
2017/03/02 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
2020/06/19 Javascript
vue中axios请求的封装实例代码
2019/03/23 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
Python的迭代器和生成器
2015/07/29 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
Python反爬虫技术之防止IP地址被封杀的讲解
2019/01/09 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
Python的collections模块真的很好用
2021/03/01 Python
财务会计专业毕业生自荐信
2013/10/19 职场文书
法警的竞聘演讲稿
2014/01/02 职场文书
学徒工职责
2014/03/06 职场文书
银行授权委托书范本
2014/10/04 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
刑事法律意见书
2015/06/04 职场文书
校运会新闻稿
2015/07/17 职场文书
大学开学感言
2015/08/01 职场文书
Python集合set()使用的方法详解
2022/03/18 Python