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 Keycode对照表
Oct 24 Javascript
JAVASCRIPT style 中visibility和display之间的区别
Jan 22 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
javascript实现日期格式转换
Dec 16 Javascript
jQuery实现感应鼠标动画效果自动伸长的输入框实例
Feb 24 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 Javascript
vue axios数据请求get、post方法及实例详解
Sep 11 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
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数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
php常用hash加密函数
2014/11/22 PHP
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
JS解析XML实例分析
2015/01/30 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
js绑定事件和解绑事件
2017/04/27 Javascript
jQuery封装animate.css的实例
2018/01/04 jQuery
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
分析并输出Python代码依赖的库的实现代码
2015/08/09 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
python对象与json相互转换的方法
2019/05/07 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
Seavenger官网:潜水服、浮潜、靴子和袜子
2020/03/05 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
2014年教学管理工作总结
2014/12/02 职场文书
单位工作证明范本
2015/06/15 职场文书
旷工检讨书大全
2015/08/15 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
python编程项目中线上问题排查与解决
2021/11/01 Python