JavaScript处理事件的一些兼容写法

绑定事件

1. var addEvent = function( obj, type, fn ) {
   
2.   if (obj.addEventListener)
   
3.       obj.addEventListener( type, fn, false );
   
4.   else if (obj.attachEvent) {
   
5.       obj["e"+type+fn] = fn;
   
6.       obj.attachEvent( "on"+type, function() {
   
7.           obj["e"+type+fn]();
   
8.       } );
   
9.   }
   
10. };

另一个实现

1. var addEvent = (function () {
   
2.   if (document.addEventListener) {
   
3.       return function (el, type, fn) {
   
4.           el.addEventListener(type, fn, false);
   
5.       };
   
6.   } else {
   
7.       return function (el, type, fn) {
   
8.           el.attachEvent('on' + type, function () {
   
9.               return fn.call(el, window.event);
   
10.           });
    
11.       }
    
12.   }
    
13. })();

绑定onpropertychange事件

onpropertychange是微软 制造的一个事件，它在一个元素的属性发生变化的时候触发，常见的有文本的长度改变，样长改变等，FF大致和它相似的属性为oninput事件，不过它只针对textfield与textarea的value属性。safari，firefox，chrome与 opera都支持此属性。

1. var addPropertyChangeEvent = function (obj,fn) {
   
2.   if(window.ActiveXObject){
   
3.       obj.onpropertychange = fn;
   
4.   }else{
   
5.       obj.addEventListener("input",fn,false);
   
6.   }
   
7. }

复制代码

移除事件

1. var removeEvent = function( obj, type, fn ) {
   
2.   if (obj.removeEventListener)
   
3.       obj.removeEventListener( type, fn, false );
   
4.   else if (obj.detachEvent) {
   
5.       obj.detachEvent( "on"+type, obj["e"+type+fn] );
   
6.       obj["e"+type+fn] = null;
   
7.   }
   
8. };

加载事件

1. var loadEvent = function(fn) {
   
2.   var oldonload = window.onload;
   
3.   if (typeof window.onload != 'function') {
   
4.       window.onload = fn;
   
5.   }else {
   
6.       window.onload = function() {
   
7.           oldonload();
   
8.           fn();
   
9.       }
   
10.   }
    
11. }

阻止事件

1. var stopEvent = function(e){
   
2.     e = e || window.event;
   
3.     if(e.preventDefault) {
   
4.       e.preventDefault();
   
5.       e.stopPropagation();
   
6.     }else{
   
7.       e.returnValue = false;
   
8.       e.cancelBubble = true;
   
9.     }
   
10.   },

如果仅仅是阻止事件冒泡

1. var stopPropagation = function(e) {
   
2.    e = e || window.event;
   
3.   if (!+"\v1") {
   
4.      e.cancelBubble = true;      
   
5.   } else {
   
6.      e.stopPropagation();
   
7.   }
   
8. }

取得事件源对象

相当于Prototype.js框架的Event.element(e)

1. var getEvent = function(e){
   
2.    e = e || window.event;
   
3.   var target = event.srcElement ? event.srcElement : event.target;
   
4.   return target
   
5. }

或者这个功能更强大，我在开发datagrid时开发出来的，详细用法见《一步步教你实现表格排序（第二部分）》。

1. var getEvent = function(e) {
   
2.  var e = e || window.event;
   
3.  if (!e) {
   
4.   var c = this.getEvent.caller;
   
5.   while (c) {
   
6.     e = c.arguments[0];
   
7.     if (e && (Event == e.constructor || MouseEvent  == e.constructor)) {
   
8.       break;
   
9.     }
   
10.     c = c.caller;
    
11.   }
    
12.  }
    
13.  var target = e.srcElement ? e.srcElement : e.target,
    
14.  currentN = target.nodeName.toLowerCase(),
    
15.  parentN  = target.parentNode.nodeName.toLowerCase(),
    
16.  grandN = target.parentNode.parentNode.nodeName.toLowerCase();
    
17.  return [e,target,currentN,parentN,grandN];
    
18. }