Javascript事件整理

1 停止事件传播

function stopEvent(e) {
  var e = e || window.event;
  if(e.stopPropagation) {
    e.stopPropagation();
  } else {
    e.cancelBubble = true;
  }
}

2 取消默认行为

function (e) {
  var e = e || window.event;
  if(e.preventDefault) {
    e.preventDefault();
  } else {
    e.returnValue = false;
  }
}

3 relatedTarget fromElement toElement

function getRelatedElement(e) {
  var e = e || window.event;
  if(e.relatedTarget) {
    alert(e.relatedTarget);
  } else {
    alert(e.fromElement);   // or alert(e.toElement);   
  }
}

4 添加移除事件

function addEvent( obj, type, fn )    
{    
    if  ( obj.attachEvent )    
   {    
      obj[ 'e'  + type + fn] = fn;    
      obj[type + fn] = function()    
      {            
         obj[ 'e'  + type + fn]( window.event );    
      }    
      obj.attachEvent(  'on'  + type, obj[type + fn] );    
   }    
    else    
   obj.addEventListener( type, fn,  false  );    
}    

function removeEvent( obj, type, fn )
{    
    if  ( obj.detachEvent )    
   {    
      obj.detachEvent(  'on'  + type, obj[type + fn] );    
      obj[type + fn] =  null ;    
   }    
    else    
   obj.removeEventListener( type, fn,  false  );
}

5 定义元素间的关系(relatedElement)

代码示例:

elem1=document.getElementById("combox1");
  elem2=document.getElementById("combox2");elem1.relatedElement= elem2; 
  
if (elem1.value=value1)
  elem1.relatedElement.onclick= foo_1;
else
  elem1.relatedElement.onclick= foo_2;

通过在初始化阶段设置elem1和elem2的关系,在以后的的操作中,可以通过elem1简明的定位到elme2并实施控制。这样避免了使用再次使用getElementbyId等钩子再次寻找对应元素,也能更好的反应应用的逻辑。不过,个人小疑问,为什么这个不是个数组relatedElments,这样可以设置更多的关联元素,因为现实中需要一个元素就是很可能跟很多元素关联的,可能应为这样从某些方面也增加了耦合性吧,要控制更多的元素,还是来个统一的触发器来的更合理一些。

6 target和currentTarget的区别

target是事件的调用对象(event dispatcher),currentTarget是事件的处理对象(event processor)

例如:

<div id="outside">
  <div id="inside"></div>
</div>

在div=’outsite’上注册click事件,当鼠标单击div="inside"时,event.target指向对象id="inside",event.currentTarget指向对象id="outside"

7 keyCode which

分析:

在IE下:
>> 支持keyCodeonkeydown+字母、onkeyup+字母均显示大写ASCII字符码,onkeypress+字母显示小写,onkeypress+shift+字母显示大写
>> 不支持whichcharCode,二者值为 undefined

在Firefox下:
>> 支持keyCodeonkeydown+字母、onkeyup+字母均显示大写ASCII字符码,onkeypress+字母时,除功能键外,其他键值始终为 0
>> 支持which和IE下一样
>> 支持charCode,只支持onkeypress

结论:

如果ie,用keyCode,若遵循w3c的,用which

This entry was posted in Javascript/Ajax and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Free Web Hosting