1. Was ist Event Provision: In Laien sind Ereignisse Onclick, Onmouseover, Onmouseout usw. usw. Ereignisse. Was die Delegation betrifft, werden sie gebeten, dies zu tun. Dieses Ereignis wurde ursprünglich zu bestimmten Elementen hinzugefügt, aber Sie fügen es anderen hinzu, um es zu tun, um das Ereignis abzuschließen.
Das heißt: Verwenden Sie das Prinzip der Blasen, um dem Elternteil Ereignisse hinzuzufügen, um den Ausführungseffekt auszulösen.
Vorteile: 1. Verbesserung der Leistung.
Wir können uns ein Beispiel ansehen: Jeder Li muss ausgelöst werden, um seine Hintergrundfarbe zu ändern.
<ul id = "ul"> <li> aaaaaaaaa </li> <li> bbbbbbbb </li> <li> ccccccccc </li> </ul> oneload = function () {var OUl = document.getElementByid ("ul"); var Ali = OUl.GetElements ("ligtelemente (" igiNements (; i ++) {ali [i] .onmouseover = function () {this.style.background = "red";} ali [i] .onmouseout = function () {this.style.background = "";}}}}}}}}}}Auf diese Weise können wir Mausereignisse auf Li hinzufügen.
Wenn wir jedoch viele für Schleifen haben, wird dies die Leistung beeinflussen.
Im Folgenden können wir die Ereignisdelegation verwenden, um diesen Effekt zu erzielen. HTML bleibt unverändert
window.onload = function () {var OUl = document.getElementById ("ul"); var ali = OUl.GetElementsByTagName ("li");/*Die Ereignisquelle sollte hier verwendet werden: Ereignisobjekt, Ereignisziel. Egal in welchem Ereignis es sich befindet, solange das von Ihnen betriebene Element die Ereignisquelle ist. IE: window.event.srcelement Standard: Ereignis.TargetNoDename: Finden Sie den Labelnamen des Elements */Oul.onmouseover = Funktion (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innnerHtml); if (target.nodename.tolowerCase () == "li") {target.style.background = "rot";}} Oul.onmouseout = Funktion (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerHtml); if (target.nodename.tolowerCase () == "li") {target.style.background = "";}}}Nutzen 2, neu hinzugefügte Elemente werden auch frühere Ereignisse haben.
Wir nehmen auch dieses Beispiel, aber wir müssen Li dynamisch hinzufügen. Klicken Sie auf die Schaltfläche, um Li dynamisch hinzuzufügen
wie:
<Eingabe type = "button" id = "btn"/> <ul id = "ul"> <li> aaaaaaa </li> <li> bbbbbbb </li> <li> ccccccccc </li> </ul>
Wir werden dies ohne die Veranstaltungskommission tun:
window.onload = function () {var OUl = document.getElementById ("ul"); var ali = OUl.GetElementsByTagName ("li"); var obtn = document.getElementById ("btn"); var inow = 4; für (var i = 0; i <). = "rot";} ali [i] .onmouseout = function () {this.style.background = "";}} obtn.onclick = function () {Inow ++; var oli = document.createelement ("li"); oli.innerHtml = 1111 *inwood; Oll.appendChild (oli);Wenn wir dies tun, können wir sehen, dass klicken Sie auf die Schaltfläche Neu hinzugefügt Li auf dem Li ohne das Mausbewegungsereignis, um ihre Hintergrundfarbe zu ändern.
Denn die für die Schleife wurde beim Klicken zum Hinzufügen ausgeführt.
Dann machen wir es, indem wir das Ereignis delegieren. Es ist nur so, dass die HTML unverändert bleibt
window.onload = function () {var OUl = document.getElementById ("ul"); var ali = OUl.GetElementsByTagName ("li"); var obtn = document.getElementById ("btn"); var inow = 4; OUl.onmouseOver = Funktion (ev) {var ev = ev = iv || window.event; var target = ev.target || ev.srcelement; // alert (target.innnerHtml); if (target.nodename.tolowerCase () == "li") {target.style.background = "rot";}} Oul.onmouseout = Funktion (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerHtml); if (target.nodename.tolowerCase () == "li") {target.Style.background = "";}} obtn.onclick = function () {Inow ++; var oli = document. *Inow; Oul.appendChild (oli);}}}OK:
Genau wie in unseren Weibo -Posts gibt es noch frühere Mausereignisse in der neuen Weibo Post.
Das oben genannte ist die Inbetriebnahme und Vorteile der Veranstaltung in JavaScript, die Ihnen vom Herausgeber vorgestellt wurden. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!