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

绑定事件

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

另一个实现

    var addEvent = (function () {
      if (document.addEventListener) {
          return function (el, type, fn) {
              el.addEventListener(type, fn, false);
          };
      } else {
          return function (el, type, fn) {
              el.attachEvent('on' + type, function () {
                  return fn.call(el, window.event);
              });
          }
      }
    })();

绑定onpropertychange事件

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

    var addPropertyChangeEvent = function (obj,fn) {
      if(window.ActiveXObject){
          obj.onpropertychange = fn;
      }else{
          obj.addEventListener("input",fn,false);
      }
    }

复制代码
移除事件

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

加载事件

    var loadEvent = function(fn) {
      var oldonload = window.onload;
      if (typeof window.onload != 'function') {
          window.onload = fn;
      }else {
          window.onload = function() {
              oldonload();
              fn();
          }
      }
    }

阻止事件

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

如果仅仅是阻止事件冒泡

  

 var stopPropagation = function(e) {
       e = e || window.event;
      if (!+"\v1") {
         e.cancelBubble = true;      
      } else {
         e.stopPropagation();
      }
    }

取得事件源对象

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

    var getEvent = function(e){
       e = e || window.event;
      var target = event.srcElement ? event.srcElement : event.target;
      return target
    }

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

    var getEvent = function(e) {
     var e = e || window.event;
     if (!e) {
      var c = this.getEvent.caller;
      while (c) {
        e = c.arguments[0];
        if (e && (Event == e.constructor || MouseEvent  == e.constructor)) {
          break;
        }
        c = c.caller;
      }
     }
     var target = e.srcElement ? e.srcElement : e.target,
     currentN = target.nodeName.toLowerCase(),
     parentN  = target.parentNode.nodeName.toLowerCase(),
     grandN = target.parentNode.parentNode.nodeName.toLowerCase();
     return [e,target,currentN,parentN,grandN];
    }

--------------------------------------------------------------------------------------------------
阻止冒泡事件的方法有两种，第一种是IE的方法，第二种是DOM方法，至于为什么要分为两种方法去讨论之，这里就不做讨论了，总之是浏览器一些蹩脚的问题，好了废话不说了，直接贴代码了
//阻止冒泡事件
复制代码

1 function stopBubble(e){
2  if(e&&e.stopPropagation){//非IE
3   e.stopPropagation();
4  }
5  else{//IE
6   window.event.cancelBubble=true;
7  }
8 } 

复制代码


举个例子：就是谷歌首页的更多选项吧，不知道的可以去看看http://www.google.com/
这里要应用两个点击事件，一个是div.onclick，另一个就是document.onclick，那么问题就出现了，在调用div.onclick的时候，由于冒泡事件的存在，会自动的调用document.onclick，由于冒泡的顺序是从里向外的（div->body->document->html）所以div.onclick事件就会被覆盖掉，也就不会执行了，解决的方案其实也是很简单的哦，就是在执行div.onclick的时候阻止冒泡事件就好了，那怎么阻止呢，就调用上面的函数就ok了！哈哈！
ps：在介绍一下阻止浏览器默认行为的方法，大同小异，这里就不再赘述了
复制代码

1 function stopDefault( e ) {
2         //阻止默认浏览器动作(W3C)
3         if ( e && e.preventDefault )
4             e.preventDefault();
5         //IE中阻止函数器默认动作的方式
6         else
7             window.event.returnValue = false;
8         return false;
9     } 

复制代码

<div onclick="divClick(event)">点击我</div>
<script>
　　function divClick(e){
　　　　alert("点击了DIV");　　
 　　　　e=e|| window.event;
　　　　 stopBubble(e);
　　} 

　　document.body.onclick=function(){
　　　　　　alert("我是Body的Click事件");
　　}

　　function stopBubble(e) {
            //如果传入了事件对象.那么就是非IE浏览器
            if (e && e.stopPropagation) {
                //因此它支持W3C的stopPropation()方法
                e.stopPropagation();
            }
            else {
                //否则,我们得使用IE的方式来取消事件冒泡
                window.event.cancelBubble = true;
            }
        }
</script>

stopBubble(e);加入这个是防止事件冒泡，执行body的click事件。要传个event过来



【收藏一个兼容多浏览器的阻止事件冒泡的函数】

function stopBubble(e){
    //如果传入了事件对象.那么就是非IE浏览器
    if(e && e.stopPropagation){
        //因此它支持W3C的stopPropation()方法
        e.stopPropagation();
    }
    else
    {
        //否则,我们得使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }
}

Javascript中的冒泡阻止，jquery举例

通过返回false来取消默认的行为并阻止事件起泡。
jQuery 代码:

$("form").bind("submit", function() { return false; })

描述:

通过使用 preventDefault() 方法只取消默认的行为。
jQuery 代码:

$("form").bind("submit", function(event){
  event.preventDefault();
});

描述:

通过使用 stopPropagation() 方法只阻止一个事件起泡。
jQuery 代码:

$("form").bind("submit", function(event){
  event.stopPropagation();
});

----------------------------------------------------

就是说用Div框住flash  Div的鼠标事件不传递给Body

文中说的方法记录一下
/*---------------------------
    功能:停止事件冒泡
    ---------------------------*/

    function stopBubble(e) {
        //如果提供了事件对象，则这是一个非IE浏览器
        if ( e && e.stopPropagation )
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
        else
            //否则，我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
    }
    //阻止浏览器的默认行为
    function stopDefault( e ) {
        //阻止默认浏览器动作(W3C)
        if ( e && e.preventDefault )
            e.preventDefault();
        //IE中阻止函数器默认动作的方式
        else
            window.event.returnValue = false;
        return false;
    }

使用方法
//监视用户何时把鼠标移到元素上，
    //为该元素添加红色边框

    unionDom[i].onmouseover = function(e) {
        this.style.border = "1px solid red";
        stopBubble( e );
    };
    //监视用户何时把鼠标移出元素，
    //删除我们所添加的红色边框
    unionDom[i].onmouseout = function(e) {
        this.style.border = "0px";
        stopBubble( e );
    };
uniconDom[i]是页面的一个html标记