欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

js活用事件触发对象动作

时间:2021-06-12 08:17:17|栏目:JavaScript代码|点击:
从学习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应用会有非常大的帮助. 

上一篇:js实现页面跳转的几种方法小结

栏    目:JavaScript代码

下一篇:js实现简单的日历显示效果函数示例

本文标题:js活用事件触发对象动作

本文地址:http://www.codeinn.net/misctech/140452.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有