javascript冒泡事件、滑鼠事件和dom實例詳解-js教程-PHP中文網

javascript冒泡事件、滑鼠事件和dom實例詳解

伊谢尔伦

發布： 2017-07-22 15:46:57

原創

1464 人瀏覽過

關於冒泡中的target和currentTarget

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

<p id="outer" style="background:#099"> 
      <p>我是目标p</p>  ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : p
      <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : p

      <br> ----点击这部分，输出：e.target.tagName : p || e.currentTarget.tagName : p

</p>

//看下第二个变列：
<p id="outer" style="background:#099"> 
      <p>我是目标p</p>  ----点击这部分，输出：e.target.tagName : p || e.currentTarget.tagName : p
      <p id="inner" style="background:#9C0">我是目标p</p> ----点击这部分，输出：e.target.tagName : P || e.currentTarget.tagName : p

      <br> ----点击这部分，输出：e.target.tagName : p || e.currentTarget.tagName : p

</p>

登入後複製

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 IE

###################》》取得目標 event.target prevetDefault() event.returnvalue=false###冒泡 event.stopPropagation() event.cancelBubble= true#########關於阻止預設行為，例如，當使用者右鍵滑鼠時，如果你不想選單彈出，則可以使用阻止預設行為：############

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>
<p 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="p1"
   >       
</p>
<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(&#39;txt1&#39;);
  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(&#39;txt2&#39;);
  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;
}

登入後複製

以上是javascript冒泡事件、滑鼠事件和dom實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！