Explication détaillée des événements de bouillonnement javascript, des événements de souris et des instances dom

À propos de target et currentTarget dans le bouillonnement

Target est dans l'étape cible du flux d'événements ; currentTarget est dans les étapes de capture, de cible et de bouillonnement du flux d'événements. Ce n'est que lorsque le flux d'événements est dans l'étape cible que les deux directions sont les mêmes. Lorsqu'il est dans les étapes de capture et de bouillonnement, target pointe vers l'objet cliqué et currentTarget pointe vers le parent de l'événement en cours.

<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);

La différence entre IE et DOM
                           IE
Obtenir la cible event.target event.srcElementObtenir le code de caractère event.charCode event.keyCode
Empêcher le comportement par défaut event.prevetDefault() event.returnvalue=false
Bubbling Event.stopPropagation() event.cancelBubble=true

À propos du blocage du comportement par défaut, par exemple, lorsque l'utilisateur clique avec le bouton droit de la souris, si vous ne souhaitez pas que le menu apparaisse, vous pouvez utiliser le blocage par défaut comportement :

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

Événement de la souris

<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>

le fichier js est le même suit :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!