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 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
Vue.js表单控件实践
Oct 27 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
jQuery返回定位插件详解
May 15 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
es6中Promise 对象基本功能与用法实例分析
Feb 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
杏林同学录(五)
2006/10/09 PHP
PHP原理之异常机制深入分析
2010/08/08 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
html的DOM中document对象anchors集合用法实例
2015/01/21 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
老生常谈onBlur事件与onfocus事件(js)
2016/07/09 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue生成token并保存到本地存储中
2018/07/17 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
Python fileinput模块使用实例
2015/06/03 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
什么叫做SQL注入,如何防止
2016/10/04 面试题
Java语言的优势
2015/01/10 面试题
基层党组织公开承诺书
2014/03/28 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
员工趣味活动方案
2014/08/27 职场文书
出资证明书范本(标准版)
2014/09/24 职场文书
家长通知书家长意见
2014/12/30 职场文书
新学期开学寄语2016
2015/12/04 职场文书
找规律教学反思
2016/02/23 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
全网非常详细的pytest配置文件
2022/07/15 Python