この記事では、イベント委任を使用してJavaScriptメッセージボード機能を実装する方法について説明します。

イベント委任を使用してメッセージボード機能を実装します。

ここに画像の説明を挿入

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        * {
            パディング: 0;
            マージン: 0;
        }
        体 {
            幅: 100%;
            高さ: 100%;
            背景: rgb(65, 65, 63);
        }
        。背景 {
            幅: 700ピクセル;
            高さ: 100%;
            背景: 白;
            マージン: 自動;
            上マージン: 20px;
        }
        。頭、
        .ポップヘッド{
            高さ: 50px;
            フォントサイズ: 20px;
            テキスト配置: 中央;
            行の高さ: 50px;
        }
        。名前 {
            幅: 640ピクセル;
            高さ: 40px;
            フォントサイズ: 20px;
            マージン: 10px 28px;
            行の高さ: 50px;
            境界線の半径: 8px;
            境界線: 2px実線rgb(139, 137, 137);
            アウトライン: なし;
        }
        。コンテンツ、
        .ポップ返信{
            幅: 640ピクセル;
            高さ: 150px;
            フォントサイズ: 22px;
            マージン: 10px 28px;
            境界線: 2px実線rgb(139, 137, 137);
            アウトライン: なし;
            境界線の半径: 8px;
            サイズ変更: なし;
        }
        .btn、
        .pop-btn {
            フロート: 右;
            高さ: 30px;
            右マージン: 28px;
            境界線の半径: 6px;
            アウトライン: なし;
            フォントサイズ: 20px;
            パディング: 0 20px;
            背景: rgb(169, 238, 255);
        }
        h3 {
            フォントサイズ: 20px;
            色: rgb(102, 102, 102);
            背景: rgb(205, 221, 248);
            上マージン: 50px;
            行の高さ: 50px;
            テキストインデント: 30px;
            フォントの太さ: 545;
        }
        li {
            リストスタイル: なし;
            幅: 640ピクセル;
            フォントサイズ: 22px;
            マージン: 15px 30px;
        }
        .メッセージヘッド{
            ディスプレイ: フレックス;
        }
        .メッセージヘッド .写真 {
            幅: 70ピクセル;
            高さ: 70px;
            背景: rgb(6, 109, 134);
            表示: インラインブロック;
            境界線の半径: 50%;
            テキスト配置: 中央;
            行の高さ: 70px;
            オーバーフロー: 非表示;
        }
        .メッセージヘッド.時間{
            左マージン: 12px;
        }
        .liuyan、
        .返信p{
            幅: 560ピクセル;
            /* 高さ: 76px; */
            行の高さ: 50px;
            表示: ブロック;
            背景: rgb(205, 221, 248);
            フォントサイズ: 20px;
            左マージン: 80px;
            境界線の半径: 8px;
            テキストインデント: 15px;
        }
        。消去 {
            幅: 60ピクセル;
            高さ: 30px;
            表示: ブロック;
            行の高さ: 30px;
            左マージン: 580px;
            /* 下マージン: 0px; */
            境界線の半径: 6px;
            アウトライン: なし;
            フォントサイズ: 15px;
            背景: rgb(169, 238, 255);
        }
        。答え {
            幅: 60ピクセル;
            高さ: 30px;
            表示: ブロック;
            行の高さ: 30px;
            上マージン: -29px;
            左マージン: 515px;
            境界線の半径: 6px;
            アウトライン: なし;
            フォントサイズ: 15px;
            背景: rgb(169, 238, 255);
        }
        。ポップアップ {
            幅：100vw;
            高さ：100vh;
            位置: 固定;
            背景: rgba(0, 0, 0, .3);
            左: 0;
            上: 0;
            zインデックス: 10;
            ディスプレイ: フレックス;
            アイテムの位置を中央揃えにします。
            コンテンツの中央揃え: 中央;
            表示: なし;
        }
        .pop-content {
            幅: 700ピクセル;
            背景: #fff;
            境界線の半径: 10px;
            オーバーフロー: 非表示;
            パディング下部: 20px;
        }
        .返信p{
            上マージン: 10px;
            背景: rgba(100, 100, 100, .1);
        }
    </スタイル>
</head>
<本文>
    <div class="背景">
        <div class="head">メッセージボード</div>
        <input class="name" type="text" placeholder="ニックネームを入力してください">
        <textarea class="content" placeholder="礼儀正しい発言を心がけてください..."></textarea>
        <button class="btn">メッセージを残す</button>
        <h3>人々が言っていること</h3>
        <ul class="text">
            <!-- <li>
			<div class="メッセージヘッド">
			<span class="photo">システム</span>
			<p class="time">2019-9-27 0:47:38</p>
			</div>
			<p class="liuyan">テストメッセージ</p>
			<div class="返信">
			<p>テスト返信</p>
			</div>
			<button class="delete">削除</button>
			<button class="answer">回答</button>
		</li> -->
        </ul>
    </div>
    <div class="popup">
        <div class="pop-content">
            <div class="pop-head">返信掲示板</div>
            <textarea class="pop-reply" placeholder="礼儀正しい発言を心がけてください..."></textarea>
            <button class="pop-btn huiFu">返信</button>
            <button class="pop-btn quXiao">キャンセル</button>
        </div>
    </div>
    <スクリプト>
        //イベント委任では、各クリックによってイベント処理関数 var oAns が再トリガーされるため、各 if は独立した関数と同等になります。
        //分析: イベントは誰に委任されますか? --- 共通の親要素 document.onclick = function (e) {
            //イベント処理オブジェクト。IE8 以下のブラウザと互換性があります。e = e || event;
            // ターゲット target --- どのタグがそれをトリガーするか var target = e.target;

            //メッセージを残す if(target.className === 'btn'){
                //オブジェクトを取得します var nickname = $('.name').value;
                var コンテンツ = $('.content').値;
                //入力が空かどうかを判断します if(nickname && content){
                    //タグを作成する var oLi = document.createElement('li');
                    //新しいコンテンツを挿入 oLi.innerHTML = `
                    <div class="メッセージヘッド">
                        <span class="photo">${ニックネーム}</span>
                        <p class="time">2019-9-27 0:47:38</p>
                    </div>
                    <p class="liuyan">${コンテンツ}</p>
                    <div class="返信">
                    </div>
                    <button class="delete">削除</button>
                    <button class="answer">回答</button>
                    `  
                    //最新のメッセージを先頭に挿入します $('.text').insertBefore(oLi , $('.text').firstChild);
                    //カウントダウンクロック(ターゲット、3);
                    // メッセージを残した後、メッセージボードのコンテンツをクリアします $('.content').value = '';
                }それ以外{
                    alert('入力は空にできません!')
                }
                戻る
            }
            //deleteif(target.className === 'delete'){
                //メッセージを削除しますtarget.parentNode.remove();
                戻る
            }
            //返信 if(target.className === 'answer'){
                //ポップアップウィンドウを表示します$('.popup').style.display = 'flex';
                //メッセージに返信する場所を検索します oAns = target.previousElementSibling.previousElementSibling;
                戻る 
            }
            //返信を確認する if(target.className === 'pop-btn huiFu'){
                //返信コンテンツを取得します。var huiFuContent = $('.pop-reply').value;
                if(huiFuContent){
                    //タグを作成する var oP = document.createElement('p');
                    //タグにコンテンツを挿入します oP.innerHTML = huiFuContent;
                    //メッセージ場所に返信を挿入します oAns.appendChild(oP);
                }
                //ポップアップウィンドウを閉じます$('.popup').style.display = 'none';
                戻る
            }
            //返信をキャンセルif(target.className === 'pop-btn quXiao'){
                $('.popup').style.display = 'なし';
                戻る
            }
        }
        //カウントダウン関数 clock(ele, time){
            if(!ele.disabled){
                ele.disabled = true ;
                ele.innerHTML = time + 's 後に再度メッセージを残すことができます';
                var t = setInterval(関数() {
                    時間 -  ;
                    ele.innerHTML = time + 's 後に再度メッセージを残すことができます';
                    時間 <= 0 の場合
                        クリア間隔(t) ;
                        ele.disabled = false ;
                        ele.innerHTML = 'メッセージ';
                    }
                },1000)
            }
        }
        //オブジェクト関数 $(selector){ を取得する
            document.querySelector(セレクタ) を返します。
        }
    </スクリプト>
</本文>
</html>