• 代碼示例指路 常見的 HTML、CSS、JavaScript 事件代碼示例

事件

在 Web 開發(fā)中，事件是用戶與網(wǎng)頁交互的重要方式之一。通過事件，用戶可以與頁面元素進(jìn)行交互，觸發(fā)相應(yīng)的功能或效果。本文將介紹常見的 HTML、CSS、JavaScript 事件，以及事件對(duì)象和事件代理的概念。

HTML 事件

鼠標(biāo)事件

鼠標(biāo)事件是用戶通過鼠標(biāo)與頁面元素交互時(shí)觸發(fā)的事件。常見的鼠標(biāo)事件包括：

• click: 單擊鼠標(biāo)時(shí)觸發(fā)。
• dblclick: 在同一元素雙擊鼠標(biāo)時(shí)觸發(fā)。
• mousedown: 按下鼠標(biāo)鍵時(shí)觸發(fā)。
• mouseup: 釋放按下的鼠標(biāo)鍵時(shí)觸發(fā)。
• mousemove: 當(dāng)鼠標(biāo)在節(jié)點(diǎn)內(nèi)部移動(dòng)時(shí)觸發(fā)，持續(xù)移動(dòng)時(shí)會(huì)連續(xù)觸發(fā)。
• mouseenter: 鼠標(biāo)進(jìn)入一個(gè)節(jié)點(diǎn)時(shí)觸發(fā)，進(jìn)入子節(jié)點(diǎn)不會(huì)觸發(fā)。
• mouseleave: 鼠標(biāo)離開一個(gè)節(jié)點(diǎn)時(shí)觸發(fā)，離開父節(jié)點(diǎn)不會(huì)觸發(fā)。
• mouseover: 鼠標(biāo)進(jìn)入一個(gè)節(jié)點(diǎn)時(shí)觸發(fā)，進(jìn)入子節(jié)點(diǎn)會(huì)再次觸發(fā)。
• mouseout: 鼠標(biāo)離開一個(gè)節(jié)點(diǎn)時(shí)觸發(fā)，離開父節(jié)點(diǎn)也會(huì)觸發(fā)。
• wheel: 滾動(dòng)鼠標(biāo)時(shí)觸發(fā)。

鍵盤事件

鍵盤事件是用戶通過鍵盤與頁面元素交互時(shí)觸發(fā)的事件。常見的鍵盤事件包括：

• keydown: 按下鍵盤時(shí)觸發(fā)。
• keypress: 按下有值的鍵觸發(fā)（數(shù)字、字母等）。
• keyup: 松開鍵盤時(shí)觸發(fā)。

表單事件

表單事件是用戶在表單元素中輸入時(shí)觸發(fā)的事件。常見的表單事件包括：

• input: 當(dāng)表單元素的值發(fā)生改變時(shí)觸發(fā)。
• select: 當(dāng)在輸入框中選中文本時(shí)觸發(fā)。
• change: 當(dāng)表單元素的值發(fā)生改變時(shí)觸發(fā)，但與 input 不同的是不會(huì)連續(xù)觸發(fā)，而是在全部修改完后觸發(fā)。
• reset: 當(dāng)表單重置時(shí)觸發(fā)，即所有表單成員變回默認(rèn)值。
• submit: 當(dāng)表單數(shù)據(jù)向服務(wù)器提交時(shí)觸發(fā)。

JavaScript 事件對(duì)象

事件發(fā)生后，會(huì)產(chǎn)生一個(gè)事件對(duì)象作為參數(shù)傳給監(jiān)聽函數(shù)。事件對(duì)象常見的屬性包括：

• Event.target: 返回事件當(dāng)前所在的節(jié)點(diǎn)。
• Event.type: 返回一個(gè)字符串，表示事件的類型。
• Event.preventDefault(): 取消瀏覽器對(duì)當(dāng)前事件的默認(rèn)行為。
• Event.stopPropagation(): 阻止事件在 DOM 中繼續(xù)傳播。

事件代理（事件委托）

事件代理是一種將事件處理程序添加到一個(gè)父元素上，以處理其子元素的事件的技術(shù)。通過事件代理，可以實(shí)現(xiàn)更高效的事件管理，減少事件處理程序的數(shù)量。常用于列表或表格等動(dòng)態(tài)內(nèi)容的處理。

<ul id="list">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>

<script>
    var list = document.getElementById("list");
    list.addEventListener("click", function(e) {
        if (e.target.tagName === "LI") {
            console.log("點(diǎn)擊了 li 標(biāo)簽");
            console.log(e.target.innerHTML);
        }
    });
</script>

通過事件代理，我們可以在父元素上監(jiān)聽子元素的事件，從而簡(jiǎn)化代碼并提高性能。

在 Web 開發(fā)中，事件是實(shí)現(xiàn)交互的關(guān)鍵，理解事件相關(guān)知識(shí)將有助于更好地處理用戶與網(wǎng)頁之間的交互行為。文章來源地址http://www.zghlxwxcb.cn/news/detail-825868.html

到了這里，關(guān)于[前端開發(fā)] 常見的 HTML CSS JavaScript 事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！