1. Qu'est-ce que la Commission des événements: en termes de laïc, les événements sont Onclick, OnMouseover, OnMouseout, etc., etc. sont des événements. Quant à la délégation, on leur demande de le faire. Cet événement a été initialement ajouté à certains éléments, mais vous l'ajoutez à d'autres pour le faire pour terminer l'événement.
Autrement dit: utilisez le principe des bulles pour ajouter des événements au parent pour déclencher l'effet d'exécution.
Avantages: 1. Améliorer les performances.
Nous pouvons examiner un exemple: chaque Li doit être déclenché pour changer leur couleur d'arrière-plan.
<ul id = "ul"> <li> aaaaaaaaa </li> <li> bbbbbbbb </li> <li> cccccccccccc </li> </ul> window.onLoad = function () {var oul = Document.getElementById ("ul"); var ali = oul.getElelementyThing i ++) {ali [i] .onMouseOver = function () {this.style.background = "red";} ali [i] .onMouseout = function () {this.style.background = "";}}}De cette façon, nous pouvons ajouter des événements de souris sur Li.
Mais si nous pouvons en avoir beaucoup pour les boucles, cela affectera les performances.
Ci-dessous, nous pouvons utiliser la délégation des événements pour réaliser cet effet. HTML reste inchangé
window.onLoad = function () {var oul = document.getElementyId ("ul"); var ali = oul.getElementsByTagName ("li"); / * La source d'événement doit être utilisée ici: objet d'événement, source d'événement. Quel que soit le événement dans lequel il se trouve, tant que l'élément que vous utilisez est la source d'événement. ie: window.event.srcelement Standard: event.targetNodeName: Trouvez le nom d'étiquette de l'élément * / oul.onmouseOver = fonction (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowercase () == "li") {target.style.background = "red";}} oul.onMouseout = function (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowercase () == "li") {target.style.background = "";}}}Benefit 2, les éléments nouvellement ajoutés auront également des événements précédents.
Nous prenons également cet exemple, mais nous devons ajouter LI dynamiquement. Cliquez sur le bouton pour ajouter Li dynamiquement
comme:
<entrée type = "Button" id = "btn" /> <ul id = "ul"> <li> aaaaaaa </li> <li> BBBBBBB </li> <li> CCCCCCCCCCCCC </li> </ul>
Nous le ferons sans la commission de l'événement:
window.onload = function () {var oul = document.getElementById ("ul"); var ali = oul.getElementsByTagName ("li"); var obtn = document.getElementById ("btn"); var inow = 4; for (var i = 0; i <ali.length; i ++) {alli [i] .onMouseOver = function () {this.style.background = "red";} ali [i] .onMouseout = function () {this.style.background = "";}} obtn.onclick = function () {inow ++; var oli = document.createElement ("li"); oli.innerhtml = 1111 *En faisant cela, nous pouvons voir que cliquez sur le bouton nouvellement ajouté Li sur le LI sans l'événement de déménagement de la souris pour modifier leur couleur d'arrière-plan.
Parce que la boucle FOR a été exécutée lors du clic pour ajouter.
Ensuite, nous le faisons en déléguant l'événement. C'est juste que le HTML reste inchangé
window.onload = function () {var oul = document.getElementById ("ul"); var ali = oul.getElementsByTagName ("li"); var obtn = document.getElementById ("btn"); var inow = 4; oul.onmouseOver = function (ev) {var ev = ev || window.event; var target = ev.target || ev.srcelement; // alert (target.innerhtml); if (target.nodename.tolowercase () == "li") {target.style.background = "red";}} oul.onMouseout = function (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.createelement ("li"); oli.innerhtmL = 1111 * inow; oul.appendChild (oli);}}D'ACCORD:
Tout comme dans nos messages de Weibo, il y a encore des événements de souris précédents sur le nouveau post Weibo.
Ce qui précède est la mise en service et les avantages de l'événement en JavaScript qui vous sont présentés par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!