易被忽視的js事件問題總結(jié)

更新時間：2016年05月14日 15:19:18 作者：向婷風

這篇文章主要為大家詳細介紹了易被忽視的js事件問題，包括跨平臺事件、冒泡中target和currentTarget的區(qū)別，感興趣的朋友可以參考一下

一、跨平臺事件

什么叫跨平臺事件？即在不同的瀏覽器上執(zhí)行同一事件，所使用的方法不同。

什么是EventUtil對象？有什么作用？即將所有與事件相關(guān)的函數(shù)，融合在一起的一個容器，方便管理事件對象，它沒有屬性。主要處理DOM事件和IE事件的磨合，使其盡可能的相似。

下面我們來看一下DOM和IE之間的對象屬性和方法做個對比（這里只指出兩者之間不同的屬性和方法），主要有以下五大點：
DOM屬性和方法 IE屬性和方法
charcode              keycode
preventDefault     returnValue=false
relatedTarget        fromobj|toobj
stopPropation      cancelBuble=true
target                    srcobj

我們用一個小demo看一下，能夠很好的解決事件跨平臺的兼容問題：

<html>
<head>
  <title>eventUtil</title>
  <script eventType="text/javascript">
    var eventUtil = {
      //監(jiān)聽事件
      addListener: function(obj, eventType, fn) {
        if (obj.addEventListener) {
          obj.addEventListener(eventType, fn, false);
        } else if (obj.attachEvent) {
          obj.attachEvent('on' + eventType, fn);
        } else {
          obj['on' + eventType] = fn;
        }
      },
      //返回event對象
      getEvent: function(event) {
        return event || window.event;
        //return event ? event : window.event;
      },
      //返回目標事件對象
      getTarget: function(event) {
        return event.target || event.srcobj;
      }，
      preventDefault: function(event) {
        if (event.preventDefault) {
          event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },     
      removeListener: function(obj, eventType, fn) {
        if (obj.removeEventListener) {
          obj.removeEventListener(eventType, fn, false);
        } else if (obj.deattachEvent) {
          obj.detachEvent(eventType, fn);
        } else {
          obj['on' + eventType] = null;
        }
      },
      
      stopPropagation: function(event) {
        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }
      }
    };
  </script>
</head>
<body>
  <input eventType="button" value="click me" id="btn" />
  <p>event</p>
  <a>Hello word!</a>
  <script eventType="text/javascript">
  function addBtnListen(event)
  {
    var event = eventUtil.getEvent(event);
    var target = eventUtil.getTarget(event);
    alert("my name is kock");
    alert(event.eventType);
    alert(target);
    eventUtil.stopPropagation(event);

  }
  function getBodyListen(event)
  {
      alert("click body");
  }
  function getLinkListen(event)
  {
       alert("prevent default event");
       var event = eventUtil.getEvent(event);
       eventUtil.preventDefault(event);
  }
  window.onload=function()
  {
      var btn = document.getobjById("btn");
      var link = document.getobjsByTagName("a")[0];
      eventUtil.addListener(btn, "click", addBtnListen);
      eventUtil.addListener(document.body, "click", getBodyListen);
      eventUtil.addListener(link, "click",getLinkListen);
  }   
</script>
</body>
</html>

上面的方法能夠解決事件跨平臺問題，接下來，我們看下charCode的屬性。

首先給eventUtil定義一個新方法，formatEvent,接受一個參數(shù)，即Event對象。

eventUtil.formatEvent=function(event)
{
  if(isIE&&isWin)---檢測瀏覽器的問題

  {
   event.charCode=(event.type=="keypress")?event.keycode:0;
   event.eventphase=2;--表示冒泡階段，IE僅支持冒泡階段
  }
  return event;
}

二、關(guān)于冒泡中的target和currentTarget

target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。只有當事件流處在目標階段的時候，兩個的指向才是一樣的，而當處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件的父級。

<div id="outer" style="background:#099"> 
      <p>我是目標div</p>  ----點擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV
      <p id="inner" style="background:#9C0">我是目標p</p> ----點擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV

      <br> ----點擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV

</div>

//看下第二個變列：
<div id="outer" style="background:#099"> 
      <div>我是目標div</div>  ----點擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV
      <p id="inner" style="background:#9C0">我是目標p</p> ----點擊這部分，輸出：e.target.tagName : P || e.currentTarget.tagName : DIV

      <br> ----點擊這部分，輸出：e.target.tagName : DIV || e.currentTarget.tagName : DIV

</div>

function getObj(id)
{ 
  return document.getElementById(id);   
} 
function addEvent(obj, event, fn)
{ 
  if(window.attachEvent)
  { 
   obj.attachEvent("on" + event, fn); 
  }
  else if(window.addEventListener)
  {  
   obj.addEventListener(event, fn, false); 
  } 
} 
function test(e)
{ 
  alert("e.target.tagName : " + e.target.tagName + "\n e.currentTarget.tagName : " + e.currentTarget.tagName); 
 } 
   var outer = getObj("outer"); 
   var inner = getObj("inner"); 
   //addEvent(inner, "click", test); 
   addEvent(outer, "click", test);

三、IE和DOM區(qū)別
                         DOM                                IE
獲取目標       event.target                     event.srcElement
獲取字符代碼 event.charCode              event.keyCode
阻止默認行為 event.prevetDefault()      event.returnvalue=false
冒泡               event.stopPropagation() event.cancelBubble=true

關(guān)于阻止默認行為，比如，當用戶右擊鼠標時，如果你不想菜單彈出，則可以使用阻止默認行為：

document.body.oncontextmenu=function(event)
{
  if(isIE)
  {
     var oEvent=window.event;
     oEvent.returnValue=false; //也可以直接是return false；阻止默認行為
  }
  else
  {
    oEvent.preventDefault();
  }
}

四、鼠標事件

<p>use your mouse to click and double click the red square</p>
<div style="width:100px;height:100px;background:red"
    onmouseover="handleEvent(event)"
    onmouseout="handleEvent(event)"
    onmousedown="handleEvent(event)" 
    onmouseup="handleEvent(event)"  
    onclick="handleEvent(event)" 
    ondblclick="handleEvent(event)" id="div1"
   >       
</div>
<p><textarea id="txt1" rows="5" cols="45"></textarea></p>
<!--檢測鍵盤事件-->
<p><input type="text" id="textbox" 
      onkeydown="handle(event)"
      onkeypress="handle(event)"
      onkeyup="handle(event)"
     ></p>
<p><textarea id="txt2" rows="10" cols="45"></textarea></p>

js文件如下：

function handleEvent(event)
{
  var oText=document.getElementById('txt1');
  oText.value+= "\n"+event.type;
  oText.value+= "\n target is "+(event.srcElement||event.target).id;
  oText.value+="\n at ("+event.clientX+","+event.clientY+")in the client";
  oText.value+="\n at ("+event.screenX+","+event.screenY+")in the client";
  oText.value+="\n button down is"+event.button;
  var arrKeys=[];
  oText.value+="\n relatedTarget is"+event.relatedTarget.tagName;
  //event.relatedTarget.tagName可以判斷鼠標的來源和出處
}
function handle(event)
{
  var oText2=document.getElementById('txt2');
  oText2.value+="\n"+event.type;
  var arrKeys=[];
 if(event.shiftKey){arrKeys.push("Shift");}
 if(event.ctrlKey){arrKeys.push("Ctrl");}
 if(event.altKey){arrKeys.push("Alt");}
  oText2.value+="\n keydown is "+arrKeys;
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

您可能感興趣的文章: