js活用事件触发对象动作

 更新时间:2008年08月10日 20:12:29   作者:  
现在基本上我很少在对象里面写事情触发行为了,因为感觉那样做相同的对象代码利用率太低,容易导致代码冗余.
从学习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应用会有非常大的帮助. 

相关文章

  • addEventListener()和removeEventListener()追加事件和删除追加事件

    addEventListener()和removeEventListener()追加事件和删除追加事件

    这篇文章主要给大家介绍了关于addEventListener()和removeEventListener()追加事件和删除追加事件的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 使用pcs api往免费的百度网盘上传下载文件的方法

    使用pcs api往免费的百度网盘上传下载文件的方法

    百度个人云盘空间大,完全免费,而且提供了pcs api供调用操作文件,在平时的项目里往里面保存一些文件是很实用的。通过本文给大家介绍使用pcs api往免费的百度网盘上传下载文件的方法,感兴趣的朋友一起学习吧
    2016-03-03
  • javascript类继承的实现方法

    javascript类继承的实现方法

    JavaScript是一种面向对象的语言,而继承是面向对象编程的一个重要特性,在JavaScript中,继承的实现方式有多种,本文将介绍javascript类的继承的实现,感兴趣的朋友一起看看吧
    2023-10-10
  • 浅谈typescript中keyof与typeof操作符用法

    浅谈typescript中keyof与typeof操作符用法

    本文主要介绍了typescript中keyof与typeof操作符用法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 详解JS中continue关键字和break关键字的区别

    详解JS中continue关键字和break关键字的区别

    在javascript中continue的作用是退出当前次循环,break的作用则是一旦当前循环有break那么直接退出整个循环。本文将通过一些示例为大家详细讲讲二者的区别,感兴趣的可以了解一下
    2022-08-08
  • 微信小程序实现单列下拉菜单效果

    微信小程序实现单列下拉菜单效果

    这篇文章主要介绍了微信小程序单列下拉菜单,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Javascript 实现 Excel 导入生成图表功能

    Javascript 实现 Excel 导入生成图表功能

    这篇文章主要介绍了Javascript 实现 Excel 导入生成图表功能,本文通过实例代码讲解给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10
  • uniapp在微信小程序中图片宽度显示问题示例代码

    uniapp在微信小程序中图片宽度显示问题示例代码

    在uniapp中,如果你的富文本图片显示宽度不正常,你可以通过设置图片的宽高属性来解决这个问题,这篇文章主要介绍了uniapp在微信小程序中图片宽度显示问题,需要的朋友可以参考下
    2023-02-02
  • 图像替换新技术 状态域方法

    图像替换新技术 状态域方法

    熟悉css的开发者一定知道图像替换技术,也深知它的意义,Dave Shea 曾在他的一篇文章对此做了详细的总结
    2010-01-01
  • 基于ts的动态接口数据配置的详解

    基于ts的动态接口数据配置的详解

    这篇文章主要介绍了基于ts的动态接口数据配置的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12

最新评论