Heim > Artikel > Web-Frontend > Eine kurze Analyse der Verwendung und Vorteile von Javascript-Ereignisdelegation_Javascript-Fähigkeiten

Eine kurze Analyse der Verwendung und Vorteile von Javascript-Ereignisdelegation_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:06:471241Durchsuche

In diesem Artikel werden die Verwendung und die Vorteile der JavaScript-Ereignisdelegierung als Referenz kurz vorgestellt. Der spezifische Inhalt lautet wie folgt:

Ereignisdelegation: Fügen Sie mithilfe des Sprudelprinzips Ereignisse zum übergeordneten Element hinzu, um Ausführungseffekte auszulösen,
Vorteile: Verbesserte Leistung, neu hinzugefügte Elemente verfügen auch über frühere Ereignisse.
Ereignisobjekt: Ereignisquelle, unabhängig davon, in welchem Ereignis es sich befindet, solange das Element, das Sie bedienen, die Ereignisquelle

ist

Ereignisquelle abrufen:
IE：window.event.srcElement

Unter dem Standard : event.target target.nodeName, um zu bestimmen, welches Tag

ist

Der Code wird wie folgt angewendet:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Eine eingehende Analyse der Funktionen von JSON.parse(), JSON.stringify() und eval()_javascript FähigkeitenNächster Artikel：Eine eingehende Analyse der Funktionen von JSON.parse(), JSON.stringify() und eval()_javascript Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen