37. JavaScript 什么是DOM事件

OM事件是Web開發中的一個核心概念，它允許JavaScript響應用戶與網頁交互的各種行為。DOM（文檔對象模型）是一個跨平臺和語言獨立的接口，它讓程序能夠動態地訪問和更新文檔的內容、結構和樣式。DOM事件是這個模型中的一個關鍵組成部分，它提供了一種機制來捕捉和響應用戶的行為，如點擊、滾動、按鍵等。

事件流

DOM事件遵循一個稱為“事件流”的過程，該過程定義了從頁面中接收事件的順序。這個流程可以分為三個階段：

捕獲階段：事件從文檔根節點開始，向下傳遞到目標節點，它是事件的實際目標。
目標階段：事件到達目標節點，觸發目標節點上的監聽器。
冒泡階段：事件從目標節點開始，向上冒泡到文檔的根節點。

開發者可以選擇在捕獲階段或冒泡階段添加事件監聽器，從而控制事件的處理時機。

事件監聽器

為了響應事件，開發者需要在DOM元素上注冊事件監聽器（也稱為事件處理程序）。這通常通過addEventListener方法實現。例如，以下代碼在一個按鈕元素上添加了一個點擊事件監聽器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Click Example</title>
</head>
<body>
    <!-- 創建一個按鈕 -->
    <button id="myButton">點擊我</button>

    <!-- 引入JavaScript來處理點擊事件 -->
    <script>
        // 獲取按鈕元素
        const button = document.getElementById('myButton');
        
        // 為按鈕添加點擊事件監聽器
        button.addEventListener('click', function(event) {
            // 當按鈕被點擊時，顯示一個警告框
            alert('按鈕被點擊了！');
        });
    </script>
</body>
</html>

當用戶點擊該按鈕時，會彈出一個警告框。

事件對象

當事件發生時，瀏覽器會創建一個事件對象，這個對象包含了與事件相關的所有信息，如觸發事件的元素、事件類型、發生時間等。事件對象會作為參數傳遞給事件處理函數，允許開發者在函數內部訪問這些信息。

button.addEventListener('click', function(event) {
    console.log(event.target); // 輸出觸發事件的元素
});

常見的DOM事件類型

DOM事件有很多種類型，以下是一些常見的事件類型：

click：用戶點擊元素時觸發。
dblclick：用戶雙擊元素時觸發。
mouseover：鼠標指針移到元素上方時觸發。
mouseout：鼠標指針離開元素時觸發。
keydown：用戶按下鍵盤鍵時觸發。
keyup：用戶釋放鍵盤鍵時觸發。
load：頁面完全加載后觸發。
resize：窗口或框架被重新調整大小時觸發。

事件委托

事件委托是一種常用的事件處理模式，它利用了DOM事件的冒泡原理。開發者可以在父元素上設置一個事件監聽器來管理所有子元素的相同事件。這種方式可以提高性能，減少內存使用，并簡化事件管理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List Item Click Example</title>
</head>
<body>
    <!-- 創建一個無序列表 -->
    <ul id="myList">
        <li>列表項 1</li>
        <li>列表項 2</li>
        <li>列表項 3</li>
        <li>列表項 4</li>
    </ul>

    <!-- 引入JavaScript來處理點擊事件 -->
    <script>
        // 為整個列表添加點擊事件監聽器
        document.getElementById('myList').addEventListener('click', function(event) {
            // 檢查被點擊的元素是否是列表項
            if (event.target.tagName === 'LI') {
                // 如果是列表項，顯示一個警告框
                alert('列表項被點擊！');
            }
        });
    </script>
</body>
</html>

在這個例子中，點擊任何列表項都會觸發事件處理函數，盡管監聽器是在它們的父元素上注冊的。

結論

DOM事件是與用戶交互不可或缺的一部分，它們使得前端開發者能夠創建動態和響應式的網頁。理解事件的工作原理以及如何有效地使用它們是每個前端開發者必備的技能。隨著技術的不斷進步，DOM事件的API和模型也在不斷演變，但其基本原理和實踐仍然是構建現代Web應用的基石。

活中犯錯誤是正常的，沒有人不會犯錯誤，更何況是開發人員呢？今天我們就來卡看看開發人員在編寫 HTML 和 CSS 時最常犯的六大錯誤有哪些。

作者 | Stas Melnikov

譯者 | 彎月，責編 | 劉靜

出品 | CSDN（ID：CSDNnews）

以下為譯文：

用placeholder屬性代替label元素

開發人員經常用placeholder屬性代替label元素。但是，在這種寫法下，使用屏幕閱讀器的用戶無法填寫字段，因為屏幕閱讀器無法從placeholder屬性中讀取文本。

<input type="email" placeholder="Enter your email">

因此，我建議用label元素顯示字段名稱，而placeholder應該作為例子顯示在用戶需要填充的數據中。

<label>
<span>Enter your email</span>
<input type="email" placeholder="e.g. example@gmail.com">
</label>

用img元素標記裝飾用的圖片

我經常看到開發人員混淆裝飾圖片和內容圖片。例如，他們會使用img元素來顯示社交圖標。

<a href="https://twitter.com" class="social">
<img class="social__icon" src="twitter.svg" alt>
<span class="social__name">Twitter</span>
</a>

然而，社交圖標是裝飾性圖標，其目的是幫助用戶迅速理解元素的含義，而無需閱讀文本。即便我們刪除這些圖標，元素的含義也不會消失，所以我們應該使用background-image屬性。

<a href="https://twitter.com" class="social">
<span class="social__name">Twitter</span>
</a>

.social::before {
background-image: url("twitter.svg");
}

使用resize屬性

如果利用resize屬性來禁止textarea調整大小，那么你就破壞了可訪問性。因為用戶無法舒適地輸入數據。

textarea {
width: 100%;
height: 200px;
resize: none;
}

你應該使用min-width、max-width、min-height以及max-height屬性，這些屬性可以限制元素的大小，而且用戶也可以舒舒服服地輸入數據。

textarea {
min-width: 100%;
max-width: 100%;
min-height: 200px;
max-height: 400px;
}

同時使用display: block和position: absolute（fixed）

我經常看見開發人員像下面這樣使用display和position屬性：

.button::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
}

但是，瀏覽器會默認設置block。因此，你無需為absolute或fixed的元素設置這個值。也就是說，以下代碼的結果與上述代碼完全相同。

.button::before {
content: "";
position: absolute;
top: 0;
left: 0;
}

Outline屬性的none值

無法通過鍵盤訪問網站；鏈接打不開；無法注冊等等。出現這些情況是因為開發人員將outline屬性設置成了none值，因此元素無法聚焦。

.button:focus {
outline: none;
}

/* or */

.button:focus {
outline: 0;
}

如果你需要禁用默認的聚焦，那么也別忘了指定取而代之的聚焦狀態。

.button:focus {
outline: none;
box-shadow: 0 0 3px 0 blue;
}

空元素

開發人員經常使用HTML空元素來調整元素的樣式。例如，利用空div或span元素來顯示導航欄菜單。

<button class="hamburger">
<span></span>
<span></span>
<span></span>
</button>
.hamburger {
width: 60px;
height: 45px;
position: relative;
}

.hamburger span {
width: 100%;
height: 9px;

background-color: #d3531a;
border-radius: 9px;

position: absolute;
left: 0;
}

.hamburger span:nth-child(1) {
top: 0;
}

.hamburger span:nth-child(2) {
top: 18px;
}

.hamburger span:nth-child(3) {
top: 36px;
}

其實，你可以使用 ::before和 ::after偽元素達成同樣的效果。

<button class="hamburger">
<span class="hamburger__text">
<span class="visually-hidden">Open menu</span>
</span>
</button>
.hamburger {
width: 60px;
height: 45px;
position: relative;
}

.hamburger::before,
.hamburger::after,
.hamburger__text::before {
content: "";
width: 100%;
height: 9px;

background-color: #d3531a;
border-radius: 9px;

position: absolute;
left: 0;
}

.hamburger::before {
top: 0;
}

.hamburger::after {
top: 18px;
}

.hamburger__text::before {
top: 36px;
}

.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
width: 1px !important;
height: 1px !important;
overflow: hidden;
}

原文：https://dev.to/melnik909/the-6-most-common-mistakes-developers-when-writing-html-and-css-f92

本文為 CSDN 翻譯，轉載請注明來源出處。

【END】

來的產品經理，想做一個和qq或者微信聊天一樣的，上下拖動動態改變文本內容框和編輯器布局的需求。其實一開始是一頭霧水的，但是通過萬能的mdn，以及充滿智慧的我，最終還是完成了這個需求。其中最核心的還是ResizeObserver這個第一次用的類，所以會在這里做一些記錄。

ResizeObserver初識
ResizeObserver實戰

ResizeObserver初識

ResizeObserver interface可以報告元素content或者border box，或者svg元素box大小的變化。
ResizeObserver.disconnect() 取消觀察某個observer的所有observed目標元素。
ResizeObserver.observe() 初始化觀察一個指定元素。
ResizeObserver.observe() 取消觀察一個指定元素。
new ResizeObserver(callback) callback的入參包括entries和observer。

entries是一個數組，它由所有的ResizeObserverEntry object組成。通過for (let entry of entries) {}的方式，entry代表一個ResizeObserver object，一個entry由contentRect和target組成。

在resize相關實踐中，entry的contentRect對象是最最重要的。

{target: div, contentRect: DOMRectReadOnly}
contentRect: DOMRectReadOnly
bottom: 312.3125
height: 292.3125
left: 20
right: 626
top: 20
width: 606
x: 20
y: 20
__proto__: DOMRectReadOnly
target: div
__proto__: ResizeObserverEntry

ResizeObserver實戰

Make element resizable

元素應用resize css屬性。
元素ResizeObserver化。

<div class="main" :style="{minHeight: dynamicMainHeight}">
      <chatView></chatView>
</div>

.main {
    resize: vertical;
    overflow: auto;
}

 observeChatView() {
    if (window.ResizeObserver) {
      const viewElem = document.querySelector('.main');
      const resizeObserver = new ResizeObserver((entries) => {
        for (const entry of entries) {
          if (!this.initialHeight) {
            this.initialHeight = entry.contentRect.height;
          }
          if (this.initialHeight) {
            const deltaHeight = this.initialHeight - entry.contentRect.height;
            this.$bus.$emit('rerenderViewAndEditor', deltaHeight);
          }
        }
      });
      resizeObserver.observe(viewElem);
    } else {
      this.$Message.warning('不支持ResizeObserver');
    }
  },
},

動態計算的editor組件

<div
  class="rich-text-editor"
  contenteditable
  data-placeholder="按下Enter發送消息，按下Shift+Enter換行"
  :style="{height: dynamicHeight}"
></div>

computed: {
  dynamicHeight() {
    return `${defaultEditorHeight + this.deltaHeight}px`;
  },
},
this.$bus.$on('rerenderViewAndEditor', (deltaHeight) => {
    this.deltaHeight = deltaHeight;
});

動態計算的view組件

自動跳到最新一條消息的chatView組件需要減去deltaHeight，從而增大scrollHeight的高度。

this.$bus.$on('rerenderViewAndEditor', (deltaHeight) => {
  this.visiableHeight = document.body.clientHeight - deltaHeight;
  this.deltaHeight = deltaHeight;
});

scrollToBottom() {
  this.$nextTick(() => {
    this.scrollTop = this.scrollHeight - this.deltaHeight;
  });
},

最終效果

參考資料

https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver https://github.com/mdn/dom-examples/blob/master/resize-observer/resize-observer-text.html

努力成為優秀的前端工程師！

期待和大家交流，共同進步
微信公眾號：大大大前端 / excellent_developers

努力成為優秀前端工程師！

在線咨詢

上一篇：一篇文章帶你了解CSS 文本樣式
下一篇：網頁設計必學：CSS四種樣式引入方式及常用樣式

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商