首页 > web前端 > js教程 > 正文

js活用事件触发对象动作_javascript技巧

php中文网
发布: 2016-05-16 19:01:48
原创
1068人浏览过

从学习W3C标准以来,对于代码我好像养成了一种怪癖,能统一复用的,就不会多写一点东西,这样前台页面代码看起来会清爽很多,而效率也会成直线上升.

复制代码 代码如下:

<script> <BR><!-- <BR>//定义鼠标触发事件的范围 <BR>function findOutDiv(thisEvent){ <BR>//利用循环查找符合CSS样式名字的对象 <BR> while(thisEvent.className != "piccell"){ <BR>//如果这个对象的标签名字是HTML就停止,然后让事件对象不存在,用做后面的判断 <BR> if(thisEvent.tagName == "HTML"){ <BR> thisEvent = false; <BR> break; <BR> }else{ <BR>//否则继续下个对象,即他的父对象 <BR> thisEvent = thisEvent.parentNode <BR> } <BR> } <BR>//返回事件对象,如果事件对象不存在返回假 <BR> return thisEvent; <BR>} <BR>//利用鼠标在对象移动属性作为时间触发行为 <BR>document.onmouseover = function(e){ <BR>//这个e是FireFox捕捉事件触发对象的方法 <BR> if(!e)e = window.event; <BR>//定义Event给于鼠标触发对象的实体,即符合标准并可以控制的对象 <BR>//target为FF专用,srcElement为IE专用 <BR> var Event = e.target?e.target:e.srcElement <BR>//定义可控制的对象,调用鼠标触发事件范围所返回的对象 <BR> var thisEvent = findOutDiv(Event) <BR>//如果对象存在就继续 <BR> if(thisEvent){ <BR>//给对象定义CSS样式 <BR> thisEvent.style.border = "2px solid #7A99D2"; <BR> thisEvent.style.background = "#D2E4FC"; <BR> } <BR>} <BR>//同上,利用鼠标在对象移出作为时间触发行为 <BR>document.onmouseout = function(e){ <BR> if(!e)e = window.event; <BR> var Event = e.target?e.target:e.srcElement <BR> var thisEvent = findOutDiv(Event) <BR> if(thisEvent){ <BR> thisEvent.style.border = "2px solid #CCC"; <BR> thisEvent.style.background = "#FFF"; <BR> } <BR>} <BR>// --> <BR></script>

这样写的好处显而易见,可以不用在每个对象中写触发动作的行为,极大的节省了代码,并且JS更有可读性.
过段时间等我把个性化页面整理完成后发布出来,让大家看看利用事件触发对象动作的好处.
GOOGLE,和微软的LIVE他的个性化页面写的很不错,所以大家都可以学习一下他们的代码,这样对你将来的AJAX应用会有非常大的帮助. 
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号