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字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
javascript实现检验的各种规则
Jul 31 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
bootstrap datetimepicker日期插件使用方法
Jan 13 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
vue路由的配置和页面切换详解
Sep 09 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 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_unique
2008/03/25 PHP
教你如何使用php session
2013/10/28 PHP
php实现读取超大文件的方法
2014/07/28 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
超级强大的表单验证
2006/06/26 Javascript
JavaScript 序列化对象实现代码
2009/12/18 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
JQuery打造省市下拉框联动效果
2014/05/18 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
Python程序设计入门(3)数组的使用
2014/06/16 Python
Python_LDA实现方法详解
2017/10/25 Python
pygame库实现移动底座弹球小游戏
2020/04/14 Python
详解Python中namedtuple的使用
2020/04/27 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
Python 实现微信自动回复的方法
2020/09/11 Python
python基于爬虫+django,打造个性化API接口
2021/01/21 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
Eagle Eyes Optics鹰眼光学:高性能太阳镜
2018/12/07 全球购物
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
高三自我鉴定
2013/10/23 职场文书
医学检验专业大学生求职信
2013/11/18 职场文书
寄语学生的话
2014/04/10 职场文书
保护环境倡议书范文
2014/05/13 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书