一篇文章告訴你如何用事件委託實現JavaScript留言板功能

阿新 • • 發佈：2021-12-28

用事件委託實現留言板功能。

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            width: 100%;
            height: 100%;
            background: rgb(65,65,63);
        }
        .bacground {
            width: 700px;
            height: 100%;
            background: white;
            margin: auto;
            margin-top: 20px;
        }
        .head,.pop-head {
            height: 50px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }
        .name {
            width: 640px;
            height: 40px;
            font-size: 20px;
            margin: 10px 28px;
            line-height: 50px;
            border-radius: 8px;
            border: 2px solid rgb(139,137,137);
            outline: none;
        }
        .content,.pop-reply {
            width: 640px;
            height: 150px;
            font-size: 22px;
            margin: 10px 28px;
            border: 2px solid rgb(139,137);
            outline: none;
            bwww.cppcns.com 
order-radius: 8px;
            resize: none;
        }
        .btn,.pop-btn {
            float: right;
            height: 30px;
            margin-right: 28px;
            border-radius: 6px;
            outline: none;
            font-size: 20px;
            padding: 0 20px;
            background: rgb(169,238,255);
        }
        h3 {
            font-size: 20px;
            color: rgb(102,102,102);
            background: rgb(205,221,248);
            margin-top: 50px;
            line-height: 50px;
            text-indent: 30px;
            font-weight: 545;
        }
        li {
            list-style: none;
            width: 640px;
            font-size: 22px;
            margin: 15px 30px;
        }
        .message-head {
            display: flex;
        }
        .message-head .photo {
            width: 70px;
            height: 70px;
            background: rgb(6,109,134);
            display: inline-block;
            border-radius: 50%;
            text-align: center;
            line-height: 70px;
            overflow: hidden;
        }
        .message-head .time {
            margin-left: 12px;
        }
        .liuyan,.reply p {
            width: 560px;
            /* height: 76px; */
            line-height: 50px;
            display: block;
            background: rgb(205,248);
            font-size: 20px;
            margin-left: 80px;
            border-radius: 8px;
            text-indent: 15px;
        }
        .delete {
            width: 60px;
            height: 30px;
            display: block;
          www.cppcns.com 
  line-height: 30px;
            margin-left: 580px;
            /* margin-bottom: 0px; */
            border-radius: 6px;
            outline: none;
            font-size: 15px;
            background: rgb(169,255);
        }
        .answer {
            width: 60px;
            height: 30px;
            display: block;
            line-height: 30px;
            margin-top: -29px;
            margin-left: 515px;
            border-radius: 6px;
            outline: none;
            font- 
size: 15px;
            background: rgb(169,255);
        }
        .popup {
            width: 100vw;
            height: 100vh;
            position: fixed;
            background: rgba(0,.3);
            left: 0;
            top: 0;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
            display: none;
        }
        .pop-content {
            width: 700px;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            padding-bottom: 20px;
        }
        .reply p {
            margin-top: 10px;
            background: rgba(100,100,.1);
        }
    </style>
</head>
<body>
    <div class="bacground">
        <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="message-head">
			<span class="photo">系統</span>
			<p class="time">2019-9-27 0:47:38</p>
			</div>
			<p class="liuyan">測試留言</p>
			<div class="reply">
			<p>測試回覆</p>
			</div>
			<button class="delete">Delete</button>
			<button class="answer">Answer</button>NfDpcm;
		</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>
    <script>
        //在事件委託中，每一個if都相當於一個獨立的函式，因為每一次點選都會重新觸發事件處理函式
        var oAns ;
        //分析：事件委託給誰？ --- 共同的父元素
        document.onclick = function (e) {
            //事件處理物件，相容IE8及以下版本的瀏覽器
            e = e || event ;
            // target目標  --- 具體是由哪個標籤觸發的
            var target = e.target ;

            //留言
            if(target.className === 'btn'){
                //獲取物件
                var nickname = $('.name').value ;
                var content = $('.content').value ;
                //判斷輸入是否為空
                if(nickname && content){
                    //建立一個標籤
                    var oLi = document.createElement('li') ;
                    //插入新內容
                    oLi.innerHTML = `
                    <div class="message-head">
                        <span class="photo">${nickname}</span>
                        <p class="time">2019-9-27 0:47:38</p>
                    </div>
                    <p class="liuyan">${content}</p>
                    <div class="reply">
                    </div>
                    <button class="delete">Delete</button>
                    <button class="answer">Answer</button>
                    `  
                    //將最新的留言插入到最上面
                    $('.text').insertBefore(oLi,$('.text').firstChild) ;
                    //倒計時
                    clock(target,3) ;
                    //留言完後清空留言板內容
                    $('.content').value = '' ;
                }else{
                    alert('輸入不能為空！')
                }
                return
            }
            //刪除
            if(target.className === 'delete'){
                //刪除留言
                NfDpcmtarget.parentNode.remove() ;
                return
            }
            //回覆
            if(target.className === 'answer'){
                //顯示彈窗
                $('.popup').style.display = 'flex' ;
                //找到回覆留言的地方
                oAns = target.previousElementSibling.previousElementSibling ;
                return 
            }
            //確認回覆
            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' ;
                return
            }
            //取消回覆
            if(target.className === 'pop-btn quXiao'){
                $('.popup').style.display = 'none' ;
                return
            }
        }
        //倒計時
        function clock(ele,time){
            if(!ele.disabled){
                ele.disabled = true ;
                ele.innerHTML = time + 's後可再次留言' ;
                var t = setInterval(function () {
                    time-- ;
                    ele.innerHTML = time + 's後可再次留言' ;
                    if(time <= 0){
                        clearInterval(t) ;
                        ele.disabled = false ;
                        ele.innerHTML = '留言' ;
                    }
                },1000)
            }
        }
        //獲取物件
        function $(selector){
            return document.querySelector(selector) ;
        }
    </script>
</body>
</html>

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!

一篇文章告訴你如何用事件委託實現JavaScript留言板功能

用事件委託實現留言板功能。 <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

一篇文章告訴你什麼是架構模式和架構風格

本文探討如下幾個問題：架構模式和架構風格有區別嗎？什麼是架構模式？什麼是架構風格？

一篇文章教會你用Python多執行緒獲取小米應用商店App

【一、專案背景】小米應用商店給使用者發現最好的安卓應用和遊戲,安全可靠，可是要下載東西要一個一個的搜尋太麻煩了。而已速度不是很快。

一篇文章教你用python逆向抓取App資料

今天繼續給大夥分享一下 Python 爬蟲的教程，這次主要涉及到的是關於某 APP 的逆向分析並抓取資料，關於 APP 的反爬會麻煩一些，比如 Android 端的程式碼寫完一般會進行打包並混淆加密加固，所以除了抓包之

一篇文章教你用python畫動態愛心表白

初級畫心學Python，感覺你們的都好複雜，那我來個簡單的，我是直接把心形看作是一個正方形+兩個半圓：

一篇文章教會你用Python爬取淘寶評論資料（寫在記事本）

【一、專案簡介】本文主要目標是採集淘寶的評價，找出客戶所需要的功能。統計客戶評價上面誇哪個功能多，比如防水，容量大，好看等等。

Python 中 Mock 到底該怎麼玩？一篇文章告訴你（超全）

技術標籤：Pythonpython 1. 前言本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,如有問題請及時聯絡我們以作處理。

一篇文章教你用React實現菜譜系統

目錄一、菜譜大全1.1、專案背景1.2、技術棧1.3、開發環境1.4、專案效果展示1.5、專案初始化二、首頁開發2.1、antd-mobile 元件庫2.2、底部導航實現2.3、菜譜大全頂部導航2.4、輪播顯示2.5、mock 資料2.6、搜尋元件2.

一篇文章告訴你如何編寫Vue外掛

目錄什麼是外掛編寫外掛使用外掛總結什麼是外掛在框架中，如果需要給Vue增加一些我們需要的功能，Vue給我留了一個外掛的方式，我們可以編寫自己的外掛，然後在Vue中去註冊外掛，然後去使用他。

一篇文章告訴你如何實現Vue前端分頁和後端分頁

目錄1：前端手寫分頁(資料量小的www.cppcns.com情況下)2：後端分頁，前端只需要關注傳遞的page和pageSize總結1：前端手寫分頁(資料量小的情況下)

一篇文章告訴你Vue3指令是如何實現的

目錄前言指令註冊全域性註冊元件內註冊指令搜尋指令搜尋的時機指令搜尋的邏輯指令繫結VNode指令呼叫關於指令的思考元件上使用指令元件上的一些使用場景總結前言

乾貨 | 一篇文章教你用TensorFlow寫名著

前言最近看完了 LSTM 的一些外文資料，主要參考了 Colah 的 blog以及 Andrej Karpathy blog的一些關於 RNN 和 LSTM 的材料，準備動手去實現一個 LSTM 模型。程式碼的基礎框架來自於 Udacity 上深度學習奈米學位的課

一篇文章教你使用SpringBoot如何實現定時任務

前言在 Spring + SpringMVC 環境中，一般來說，要實現定時任務，我們有兩中方案，一種是使用 Spring 自帶的定時任務處理器 @Scheduled 註解，另一種就是使用第三方框架 Quartz ，Spring Boot 源自 Spring+SpringMVC

一篇文章教你寫出乾淨的JavaScript程式碼

目錄1. 變數使用有意義的名稱避免新增不必要的上下文避免硬編碼值2. 函式使用有意義的名稱使用預設引數限制引數的數量避免在一個函式中做太多事情避免使用布林標誌作為引數避免寫重複的程式碼避免副作用3. 條件語句使

一篇文章教你實現VUE多個DIV,button繫結回車事件

目前有個需求是這樣的，點選確定按鈕或鍵盤迴車時執行操作，很多地方都需要用到。

一篇文章讓你明白CPU快取一致性協議MESI

CPU快取記憶體（Cache Memory） CPU為何要有快取記憶體 CPU在摩爾定律的指導下以每18個月翻一番的速度在發展，然而記憶體和硬碟的發展速度遠遠不及CPU。這就造成了高效能能的記憶體和硬碟價格及其昂貴。然而CPU的高度

一篇文章帶你解讀redis分散式鎖的發展史和正確實現方式

來源：點我達技術 http://tech.dianwoda.com/ 前言近兩年來微服務變得越來越熱門，越來越多的應用部署在分散式環境中，在分散式環境中，資料一致性是一直以來需要關注並且去解決的問題，分散式鎖也就成為了一種廣泛

一篇文章帶你掌握mysql的一致性檢視（MVCC）

提到事務，你肯定會想到ACID（Atomicity、Consistency、Isolation、Durability，即原子性、一致性、隔離性、永續性），我們就來說說其中I，也就是“隔離性”。

一篇文章帶你瞭解資料庫中JOIN的用法

前言本章主要介紹資料庫中Join的的用法，也是我們在使用資料庫時非常基礎的一個知識點。本次會介紹資料庫中的 inner join、 left join、 right join 的用法以及它們之間的區別。文章如有錯誤還請大家及時指出~

一篇文章帶你瞭解資料庫中group by的用法

前言本章主要介紹資料庫中group by的用法，也是我們在使用資料庫時非常基礎的一個知識點。並且也會涉及Join的使用，關於Join的用法，可以看我寫的上一篇文章：帶你瞭解資料庫中JOIN的用法如有錯誤還請大家及時指出

一篇文章告訴你如何用事件委託實現JavaScript留言板功能

總結

相關推薦