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入门教程(11) js事件处理
Jan 31 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
DOM基础教程之事件对象
Jan 20 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JavaScript文档碎片操作实例分析
Dec 12 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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一些有意思的小区别
2006/12/06 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php查询mssql出现乱码的解决方法
2014/12/29 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
推荐dojo学习笔记
2007/03/24 Javascript
IE和Firefox下javascript的兼容写法小结
2008/12/10 Javascript
什么是JavaScript
2009/08/13 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
简述jQuery Easyui一些用法
2017/08/01 jQuery
基于JQuery的Ajax方法使用详解
2017/08/16 jQuery
移动前端图片压缩上传的实例
2017/12/06 Javascript
解决vant title-active-color与title-inactive-color不生效问题
2020/11/03 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
python自带的http模块详解
2016/11/06 Python
Python查询IP地址归属完整代码
2017/06/21 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
django model object序列化实例
2020/03/13 Python
Python接口测试结果集实现封装比较
2020/05/01 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
《钱学森》听课反思
2014/03/01 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
党的群众路线教育实践活动个人批评与自我批评
2014/10/16 职场文书
廉政承诺书
2015/01/19 职场文书
毕业证明书
2015/06/19 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
Win11如何查看显卡型号 Win11查看显卡型号的方法
2022/08/14 数码科技