In diesem Artikel erfahren Sie, wie Sie mithilfe der Ereignisdelegierung die Message Board-Funktion in JavaScript implementieren

Verwenden Sie die Ereignisdelegierung, um die Message Board-Funktionalität zu implementieren.

Bildbeschreibung hier einfügen

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil>
        * {
            Polsterung: 0;
            Rand: 0;
        }
        Körper {
            Breite: 100 %;
            Höhe: 100%;
            Hintergrund: rgb(65, 65, 63);
        }
        .Hintergrund {
            Breite: 700px;
            Höhe: 100%;
            Hintergrund: weiß;
            Rand: automatisch;
            Rand oben: 20px;
        }
        .Kopf,
        .Pop-Kopf {
            Höhe: 50px;
            Schriftgröße: 20px;
            Textausrichtung: zentriert;
            Zeilenhöhe: 50px;
        }
        .Name {
            Breite: 640px;
            Höhe: 40px;
            Schriftgröße: 20px;
            Rand: 10px 28px;
            Zeilenhöhe: 50px;
            Rahmenradius: 8px;
            Rand: 2px durchgezogenes RGB (139, 137, 137);
            Gliederung: keine;
        }
        .Inhalt,
        .pop-Antwort {
            Breite: 640px;
            Höhe: 150px;
            Schriftgröße: 22px;
            Rand: 10px 28px;
            Rand: 2px durchgezogenes RGB (139, 137, 137);
            Gliederung: keine;
            Rahmenradius: 8px;
            Größenänderung: keine;
        }
        .btn,
        .pop-btn {
            schweben: rechts;
            Höhe: 30px;
            Rand rechts: 28px;
            Rahmenradius: 6px;
            Gliederung: keine;
            Schriftgröße: 20px;
            Polsterung: 0 20px;
            Hintergrund: rgb(169, 238, 255);
        }
        h3 {
            Schriftgröße: 20px;
            Farbe: rgb(102, 102, 102);
            Hintergrund: rgb(205, 221, 248);
            Rand oben: 50px;
            Zeilenhöhe: 50px;
            Texteinzug: 30px;
            Schriftstärke: 545;
        }
        li {
            Listenstil: keiner;
            Breite: 640px;
            Schriftgröße: 22px;
            Rand: 15px 30px;
        }
        .Nachrichtenkopf {
            Anzeige: Flex;
        }
        .Nachrichtenkopf .Foto {
            Breite: 70px;
            Höhe: 70px;
            Hintergrund: rgb(6, 109, 134);
            Anzeige: Inline-Block;
            Randradius: 50 %;
            Textausrichtung: zentriert;
            Zeilenhöhe: 70px;
            Überlauf: versteckt;
        }
        .Nachrichtenkopf .Zeit {
            Rand links: 12px;
        }
        .liuyan,
        .Antwort p {
            Breite: 560px;
            /* Höhe: 76px; */
            Zeilenhöhe: 50px;
            Anzeige: Block;
            Hintergrund: rgb(205, 221, 248);
            Schriftgröße: 20px;
            Rand links: 80px;
            Rahmenradius: 8px;
            Texteinzug: 15px;
        }
        .löschen {
            Breite: 60px;
            Höhe: 30px;
            Anzeige: Block;
            Zeilenhöhe: 30px;
            Rand links: 580px;
            /* Rand unten: 0px; */
            Rahmenradius: 6px;
            Gliederung: keine;
            Schriftgröße: 15px;
            Hintergrund: rgb(169, 238, 255);
        }
        .Antwort {
            Breite: 60px;
            Höhe: 30px;
            Anzeige: Block;
            Zeilenhöhe: 30px;
            Rand oben: -29px;
            Rand links: 515px;
            Rahmenradius: 6px;
            Gliederung: keine;
            Schriftgröße: 15px;
            Hintergrund: rgb(169, 238, 255);
        }
        .popup {
            Breite: 100vw;
            Höhe: 100vh;
            Position: fest;
            Hintergrund: rgba(0, 0, 0, .3);
            links: 0;
            oben: 0;
            Z-Index: 10;
            Anzeige: Flex;
            Elemente ausrichten: zentrieren;
            Inhalt ausrichten: zentriert;
            Anzeige: keine;
        }
        .pop-Inhalt {
            Breite: 700px;
            Hintergrund: #fff;
            Rahmenradius: 10px;
            Überlauf: versteckt;
            Polsterung unten: 20px;
        }
        .Antwort p {
            Rand oben: 10px;
            Hintergrund: rgba(100, 100, 100, .1);
        }
    </Stil>
</Kopf>
<Text>
    <div Klasse="Hintergrund">
        <div class="head">Nachrichtenbrett</div>
        <input class="name" type="text" placeholder="Bitte geben Sie Ihren Spitznamen ein">
        <textarea class="content" placeholder="Bitte sprechen Sie zivilisiert..."></textarea>
        <button class="btn">Hinterlasse eine Nachricht</button>
        <h3>Was die Leute sagen</h3>
        <ul Klasse="Text">
            <!-- <li>
			<div Klasse="Nachrichtenkopf">
			<span class="foto">System</span>
			<p class="time">27.9.2019 0:47:38</p>
			</div>
			<p class="liuyan">Testnachricht</p>
			<div Klasse="Antwort">
			<p>Testantwort</p>
			</div>
			<button class="delete">Löschen</button>
			<button class="answer">Antwort</button>
		</li> -->
        </ul>
    </div>
    <div Klasse="Popup">
        <div Klasse="Pop-Inhalt">
            <div class="pop-head">Antworttafel</div>
            <textarea class="pop-reply" placeholder="Bitte sprechen Sie zivilisiert..."></textarea>
            <button class="pop-btn huiFu">Antworten</button>
            <button class="pop-btn quXiao">Abbrechen</button>
        </div>
    </div>
    <Skript>
        //Bei der Ereignisdelegierung ist jedes if gleichbedeutend mit einer unabhängigen Funktion, da jeder Klick die Ereignisverarbeitungsfunktion erneut auslöst. var oAns;
        //Analyse: An wen wird die Veranstaltung delegiert? --- Gemeinsames übergeordnetes Element document.onclick = function (e) {
            //Ereignisverarbeitungsobjekt, kompatibel mit IE8 und niedrigeren Browserversionen e = e || event;
            // Ziel Ziel --- welches Tag es auslöst var target = e.target;

            //Hinterlasse eine Nachricht if(target.className === 'btn'){
                //Objekt abrufen var nickname = $('.name').value;
                var Inhalt = $('.inhalt').Wert;
                //Beurteilen, ob die Eingabe leer ist, if(nickname && content){
                    //Ein Tag erstellen var oLi = document.createElement('li');
                    //Neuen Inhalt einfügen oLi.innerHTML = `
                    <div Klasse="Nachrichtenkopf">
                        <span class="foto">${Spitzname}</span>
                        <p class="time">27.9.2019 0:47:38</p>
                    </div>
                    <p class="liuyan">${Inhalt}</p>
                    <div Klasse="Antwort">
                    </div>
                    <button class="delete">Löschen</button>
                    <button class="answer">Antwort</button>
                    `  
                    //Füge die neueste Nachricht oben ein $('.text').insertBefore(oLi , $('.text').firstChild);
                    //Countdown-Uhr (Ziel, 3);
                    // Löschen Sie den Inhalt des Message Boards, nachdem Sie eine Nachricht hinterlassen haben $('.content').value = '';
                }anders{
                    alert('Eingabe darf nicht leer sein!')
                }
                zurückkehren
            }
            //löschenwenn(target.className === 'löschen'){
                //Löschen Sie die Nachrichttarget.parentNode.remove();
                zurückkehren
            }
            //Antworten wenn(target.className === 'answer'){
                //Popup-Fenster anzeigen$('.popup').style.display = 'flex';
                //Suchen Sie den Ort, an dem auf die Nachricht geantwortet werden kann. oAns = target.previousElementSibling.previousElementSibling;
                zurückkehren 
            }
            //Antwort bestätigen if(target.className === 'pop-btn huiFu'){
                //Antwortinhalt abrufen var huiFuContent = $('.pop-reply').value;
                wenn(huiFuContent){
                    //Ein Tag erstellen var oP = document.createElement('p');
                    //Inhalt in das Tag einfügen oP.innerHTML = huiFuContent;
                    //Antwort in den Nachrichtenbereich einfügen oAns.appendChild(oP);
                }
                //Popup-Fenster schließen$('.popup').style.display = 'none';
                zurückkehren
            }
            //Antwort abbrechenif(target.className === 'pop-btn quXiao'){
                $('.popup').style.display = 'keine';
                zurückkehren
            }
        }
        //Countdown-Funktion Uhr (Element, Zeit) {
            wenn(!ele.disabled){
                ele.disabled = true;
                ele.innerHTML = Zeit + 'Sie können nach s erneut eine Nachricht hinterlassen';
                var t = setzeIntervall(Funktion () {
                    Zeit-- ;
                    ele.innerHTML = Zeit + 'Sie können nach s erneut eine Nachricht hinterlassen';
                    wenn(Zeit <= 0){
                        Löschintervall(t);
                        ele.disabled = false;
                        ele.innerHTML = 'Nachricht';
                    }
                },1000)
            }
        }
        //Holen Sie sich die Objektfunktion $(selector){
            gibt document.querySelector(Selektor) zurück;
        }
    </Skript>
</body>
</html>