Maison > Article > interface Web > Une brève analyse de l'utilisation et des avantages des compétences de délégation d'événements javascript_javascript

Une brève analyse de l'utilisation et des avantages des compétences de délégation d'événements javascript_javascript

WBOYoriginal: 2016-05-16 15:06:471241parcourir

Cet article présente brièvement l'utilisation et les avantages de la délégation d'événements JavaScript pour votre référence. Le contenu spécifique est le suivant

Délégation d'événements : en utilisant le principe du bullage, ajoutez des événements au parent pour déclencher des effets d'exécution,
Avantages : performances améliorées, les éléments nouvellement ajoutés auront également des événements précédents.
objet événement : source d'événement, quel que soit l'événement dans lequel il se trouve, tant que l'élément que vous exploitez est la source d'événement

Obtenir la source de l'événement :
IE：window.event.srcElement

Sous le standard : event.target target.nodeName pour déterminer quelle balise

Le code s'applique comme suit :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">
window.onload=function ()
{
  var oUl=document.getElementById('ul1');
  var oBtn=document.getElementById('btn1');
  var iNow=5;
  //事件源的方法依然保留父级事件！
  oUl.onmouseover=function(ev)
  {
    var ev=ev||window.event;
    var target=ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()=='li')
    {
      target.style.background='red';
    }
  }
  oUl.onmouseout=function(ev)
  {
    var ev=ev||window.event;
    var target=ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()=='li')
    {
      target.style.background='';
    }
  }
  oBtn.onclick=function()
  {
    iNow++;
    var oLi=document.createElement('li');
    oLi.innerHTML=111*iNow;
    oUl.appendChild(oLi);
  }
}
</script>
</head>
<body >
<input type="button" value="添加" id='btn1'>
<ul id='ul1'>
  <li>11111</li>
  <li>22222</li>
  <li>3333333</li>
  <li>44444444</li>
  <li>66666666</li>
</ul>
</body>
</html>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une analyse approfondie des fonctions des compétences JSON.parse(), JSON.stringify() et eval()_javascriptArticle suivant：Une analyse approfondie des fonctions des compétences JSON.parse(), JSON.stringify() et eval()_javascript

Articles Liés

Voir plus