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 this 深入理解
Jul 30 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
Dec 28 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
Nov 17 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
微信小程序自定义组件
Aug 16 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
php explode函数实例代码
2012/02/27 PHP
PHP手机号码归属地查询代码(API接口/mysql)
2012/09/04 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
jquery JSON的解析方式示例介绍
2014/07/27 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
JavaScript事件学习小结(三)js事件对象
2016/06/09 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
2018/09/04 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
JavaScript读取本地文件常用方法流程解析
2020/10/12 Javascript
python 循环while和for in简单实例
2016/08/16 Python
python 把文件中的每一行以数组的元素放入数组中的方法
2018/04/29 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
python logging 日志的级别调整方式
2020/02/21 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
python与js主要区别点总结
2020/09/13 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
详解HTML5中表单验证的8种方法介绍
2016/12/19 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
DBA的职责都有哪些
2012/05/16 面试题
询价采购方案
2014/06/09 职场文书
名人演讲稿范文
2014/09/16 职场文书
售票员岗位职责
2015/02/15 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书