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之旅 对象的原型链之由来
Aug 25 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
Feb 04 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
javascript中json基础知识详解
Jan 19 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
让IDE识别webpack的别名alias的实现方法
May 06 Javascript
JavaScript实现网页留言板功能
Nov 23 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获取CSS文件中图片地址并下载到本地的方法
2014/12/02 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
js GridView 实现自动计算操作代码
2009/03/25 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
js实现的万能flv网页播放器代码
2016/04/30 Javascript
jquery实现左右无缝轮播图
2020/07/31 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
python与字符编码问题
2019/05/24 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
美国零售商店:Blue&Cream
2017/04/07 全球购物
PHP如何设置和取得Cookie值
2015/06/30 面试题
任命书格式
2014/06/05 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
先进党组织事迹材料
2014/12/26 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
幽灵公主观后感
2015/06/09 职场文书
市级三好生竞选稿
2015/11/21 职场文书
高三英语教学反思
2016/03/03 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书