源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

js活用事件触发对象动作

  • 时间:2020-01-22 00:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js活用事件触发对象动作
从学习W3C标准以来,对于代码我好像养成了一种怪癖,能统一复用的,就不会多写一点东西,这样前台页面代码看起来会清爽很多,而效率也会成直线上升.
[u]复制代码[/u] 代码如下:
<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应用会有非常大的帮助. 
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部