event.target 詳解：理解事件目標對象

event.target 詳解：理解事件目標對象

在 JavaScript 事件處理中，event.target 是一個關鍵屬性，它表示最初觸發事件的 DOM 元素。下面我將通過一個可視化示例詳細解釋其工作原理和使用場景。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>event.target 詳解</title><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #2c3e50;background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;}header {text-align: center;padding: 30px 0;margin-bottom: 30px;}h1 {font-size: 2.8rem;margin-bottom: 15px;color: #34495e;}.subtitle {color: #7f8c8d;font-size: 1.3rem;max-width: 800px;margin: 0 auto;}.card {background: white;border-radius: 12px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);padding: 30px;margin-bottom: 30px;}.card-header {margin-bottom: 20px;padding-bottom: 15px;border-bottom: 2px solid #f0f4f8;}.explanation {background: #f8fafc;padding: 20px;border-radius: 8px;margin: 20px 0;}.code-block {background: #2d2d2d;color: #f8f8f2;padding: 20px;border-radius: 8px;font-family: 'Fira Code', monospace;font-size: 15px;overflow-x: auto;margin: 15px 0;}.demo-area {background: white;padding: 30px;border-radius: 12px;margin-top: 20px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}.event-target {display: flex;flex-direction: column;gap: 30px;margin: 20px 0;}.target-level {padding: 30px;text-align: center;border-radius: 8px;transition: all 0.3s;cursor: pointer;position: relative;}.target-level:hover {transform: scale(1.02);box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);}.level-outer {background: #e3f2fd;}.level-middle {background: #bbdefb;margin: 0 40px;}.level-inner {background: #90caf9;margin: 0 80px;}.level-core {background: #64b5f6;margin: 0 120px;padding: 40px;}.event-info {background: #1e1e1e;color: #d4d4d4;padding: 20px;border-radius: 8px;margin-top: 20px;font-family: 'Fira Code', monospace;font-size: 14px;}.form-demo {background: #e8f5e9;padding: 20px;border-radius: 8px;margin: 20px 0;}input, button, select {padding: 12px;margin: 10px;border: 1px solid #ddd;border-radius: 6px;font-size: 16px;}button {background: #42b983;color: white;border: none;cursor: pointer;transition: background 0.3s;}button:hover {background: #3aa776;}.comparison {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;margin: 30px 0;}.comparison-card {background: #f8fafc;padding: 20px;border-radius: 8px;}.highlight {background-color: #fff9c4;padding: 2px 4px;border-radius: 3px;color: #333;}.use-cases {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;margin: 30px 0;}.use-case-card {background: #f8fafc;padding: 20px;border-radius: 8px;border-left: 4px solid #42b983;}.target-visual {position: absolute;top: 10px;right: 10px;background: #e74c3c;color: white;padding: 5px 10px;border-radius: 20px;font-size: 12px;font-weight: bold;display: none;}.event-log {margin-top: 20px;padding: 15px;background: #f8f9fa;border-radius: 6px;border-left: 4px solid #42b983;font-family: 'Fira Code', monospace;}.log-entry {margin-bottom: 8px;padding-bottom: 8px;border-bottom: 1px solid #eee;}@media (max-width: 768px) {.comparison {grid-template-columns: 1fr;}.level-middle, .level-inner, .level-core {margin: 0 20px;}h1 {font-size: 2.2rem;}}</style>
</head>
<body><div class="container"><header><h1>event.target 詳解</h1><p class="subtitle">深入理解 JavaScript 事件系統中的目標對象</p></header><div class="card"><div class="card-header"><h2>什么是 event.target？</h2></div><div class="explanation"><p><code class="highlight">event.target</code> 是 JavaScript 事件對象的一個屬性，它指向<strong>最初觸發事件的 DOM 元素</strong>。</p><p>無論事件在 DOM 樹中如何傳播（捕獲或冒泡），<code>event.target</code> 始終指向實際觸發事件的元素。</p><div class="code-block">// 事件處理函數function handleClick(event) {// event.target 指向最初觸發事件的元素console.log('事件目標:', event.target);// 與 event.currentTarget 比較console.log('當前目標:', event.currentTarget);}// 添加事件監聽document.getElementById('myElement').addEventListener('click', handleClick);</div></div><div class="comparison"><div class="comparison-card"><h3>event.target</h3><ul><li>指向<strong>實際觸發事件</strong>的元素</li><li>在事件傳播過程中<strong>不會改變</strong></li><li>代表事件的<strong>源頭</strong></li><li>用于<strong>精確確定事件來源</strong></li></ul></div><div class="comparison-card"><h3>event.currentTarget</h3><ul><li>指向<strong>當前處理事件</strong>的元素</li><li>在事件傳播過程中<strong>會改變</strong></li><li>代表事件的<strong>當前處理者</strong></li><li>等同于事件處理函數中的<strong>this</strong></li></ul></div></div><div class="demo-area"><h2>事件傳播演示</h2><div class="event-target"><div class="target-level level-outer" @click="handleEvent($event, 'outer')"><div class="target-visual" v-if="showTarget === 'outer'">event.target</div>外層元素 (event.currentTarget)<div class="target-level level-middle" @click="handleEvent($event, 'middle')"><div class="target-visual" v-if="showTarget === 'middle'">event.target</div>中間元素 (event.currentTarget)<div class="target-level level-inner" @click="handleEvent($event, 'inner')"><div class="target-visual" v-if="showTarget === 'inner'">event.target</div>內層元素 (event.currentTarget)<div class="target-level level-core" @click="handleEvent($event, 'core')"><div class="target-visual" v-if="showTarget === 'core'">event.target</div>核心元素 (event.currentTarget)</div></div></div></div></div><div class="event-info"><div class="log-entry" v-if="eventLog.length > 0"><strong>最后事件:</strong> {{ eventLog[0].message }}</div><div class="log-entry"><strong>當前 event.target:</strong> {{ currentTarget || '未觸發事件' }}</div></div><button @click="clearLogs">清除日志</button></div></div><div class="card"><div class="card-header"><h2>event.target 與 event.currentTarget 對比</h2></div><div class="explanation"><p>理解這兩個屬性的區別對于正確處理事件至關重要：</p><div class="code-block">&lt;div id="outer"&gt;&lt;div id="inner"&gt;點擊我&lt;/div&gt;&lt;/div&gt;// JavaScriptdocument.getElementById('outer').addEventListener('click', function(event) {console.log('event.target:', event.target.id); // 輸出: innerconsole.log('event.currentTarget:', event.currentTarget.id); // 輸出: outerconsole.log('this:', this.id); // 輸出: outer});</div><p>在這個例子中，當用戶點擊內部元素時：</p><ul><li><code>event.target</code> 指向內部元素（#inner），因為它是實際被點擊的元素</li><li><code>event.currentTarget</code> 指向外部元素（#outer），因為事件處理程序綁定在它上面</li><li><code>this</code> 等同于 <code>event.currentTarget</code></li></ul></div><div class="demo-area"><h2>實際應用：表單處理</h2><div class="form-demo" @click="handleFormEvent"><h3>用戶注冊表單</h3><input type="text" placeholder="用戶名" id="username"><input type="email" placeholder="郵箱" id="email"><select id="country"><option value="">選擇國家</option><option value="us">美國</option><option value="cn">中國</option><option value="jp">日本</option></select><button type="submit">提交</button><button type="button">取消</button></div><div class="event-log"><div class="log-entry" v-for="(log, index) in formLog" :key="index">{{ log }}</div></div></div></div><div class="card"><div class="card-header"><h2>event.target 的常見用途</h2></div><div class="use-cases"><div class="use-case-card"><h3>事件委托</h3><p>利用事件冒泡，在父元素上處理子元素的事件：</p><div class="code-block">// 父元素處理所有按鈕點擊document.getElementById('button-container').addEventListener('click', function(event) {if (event.target.classList.contains('btn')) {console.log('點擊了按鈕:', event.target.id);}});</div></div><div class="use-case-card"><h3>動態元素處理</h3><p>處理動態添加的元素的事件：</p><div class="code-block">// 處理動態列表項點擊document.getElementById('list').addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('點擊了列表項:', event.target.textContent);}});</div></div><div class="use-case-card"><h3>表單元素處理</h3><p>確定表單中哪個元素觸發了事件：</p><div class="code-block">// 處理表單輸入變化document.getElementById('myForm').addEventListener('input', function(event) {console.log('輸入變化的元素:', event.target.id);console.log('新值:', event.target.value);});</div></div><div class="use-case-card"><h3>自定義組件處理</h3><p>在復雜組件中確定事件來源：</p><div class="code-block">// 處理自定義組件中的點擊myComponent.addEventListener('click', function(event) {if (event.target.classList.contains('close-btn')) {this.close();} else if (event.target.classList.contains('expand-btn')) {this.expand();}});</div></div></div><div class="demo-area"><h2>事件委托演示</h2><div class="event-target" id="dynamic-container" @click="handleDynamicEvent"><button class="dynamic-btn" v-for="(btn, index) in buttons" :key="index" :data-id="btn.id">{{ btn.text }}</button></div><div style="margin: 20px 0;"><button @click="addButton">添加按鈕</button><button @click="removeButton">移除按鈕</button></div><div class="event-log"><div class="log-entry" v-for="(log, index) in dynamicLog" :key="index">{{ log }}</div></div></div></div><div class="card"><div class="card-header"><h2>event.target 的高級用法</h2></div><div class="explanation"><h3>元素類型檢測</h3><p>使用 <code>event.target</code> 的屬性確定元素類型：</p><div class="code-block">function handleEvent(event) {// 檢測元素標簽名console.log('標簽名:', event.target.tagName);// 檢測元素類型console.log('元素類型:', event.target.type);// 檢測 CSS 類console.log('包含 active 類:', event.target.classList.contains('active'));// 檢測特定屬性console.log('data-id 屬性:', event.target.dataset.id);}</div></div><div class="explanation"><h3>事件冒泡控制</h3><p>結合 <code>event.stopPropagation()</code> 控制事件傳播：</p><div class="code-block">// 阻止事件冒泡function handleInnerClick(event) {console.log('內部元素被點擊');event.stopPropagation(); // 阻止事件冒泡到父元素}// 父元素不會收到內部元素的點擊事件function handleOuterClick(event) {console.log('外部元素被點擊');}</div></div><div class="explanation"><h3>在 Vue 中的特殊用法</h3><p>在 Vue 模板中訪問原生事件對象：</p><div class="code-block">&lt;!-- 使用 $event 訪問原生事件 --&gt;&lt;button @click="handleClick($event)"&gt;點擊我&lt;/button&gt;// Vue 方法methods: {handleClick(event) {console.log('點擊的元素:', event.target);console.log('元素文本:', event.target.textContent);}}</div></div></div></div><script>new Vue({el: '.container',data: {showTarget: '',currentTarget: '',eventLog: [],formLog: [],dynamicLog: [],buttons: [{ id: 'btn1', text: '按鈕 1' },{ id: 'btn2', text: '按鈕 2' },{ id: 'btn3', text: '按鈕 3' }],buttonCounter: 3},methods: {handleEvent(event, level) {// 顯示當前目標指示器this.showTarget = level;// 獲取元素信息const targetId = event.target.id || event.target.className || event.target.tagName;const currentId = event.currentTarget.className || event.currentTarget.tagName;// 更新數據this.currentTarget = `tag: ${event.target.tagName}, id: ${event.target.id || '無'}, class: ${event.target.className || '無'}`;// 添加到日志this.eventLog.unshift({message: `事件來源: ${level}, 實際目標: ${targetId}, 當前目標: ${currentId}`});// 限制日志長度if (this.eventLog.length > 10) {this.eventLog.pop();}},handleFormEvent(event) {if (event.target.tagName === 'INPUT' || event.target.tagName === 'SELECT') {this.formLog.unshift(`表單元素變化: ${event.target.id}, 值: ${event.target.value}`);} else if (event.target.tagName === 'BUTTON') {this.formLog.unshift(`按鈕點擊: ${event.target.textContent}`);if (event.target.textContent === '提交') {event.preventDefault();}}if (this.formLog.length > 5) {this.formLog.pop();}},handleDynamicEvent(event) {if (event.target.classList.contains('dynamic-btn')) {this.dynamicLog.unshift(`點擊按鈕: ${event.target.textContent}, data-id: ${event.target.dataset.id}`);} else {this.dynamicLog.unshift(`點擊容器: ${event.target.className || event.target.tagName}`);}if (this.dynamicLog.length > 10) {this.dynamicLog.pop();}},addButton() {this.buttonCounter++;this.buttons.push({id: `btn${this.buttonCounter}`,text: `按鈕 ${this.buttonCounter}`});},removeButton() {if (this.buttons.length > 1) {this.buttons.pop();this.buttonCounter--;}},clearLogs() {this.eventLog = [];this.formLog = [];this.dynamicLog = [];this.currentTarget = '';this.showTarget = '';}}});</script>
</body>
</html>

event.target 詳解

什么是 event.target？

event.target 是 JavaScript 事件對象的一個屬性，它指向最初觸發事件的 DOM 元素。無論事件在 DOM 樹中如何傳播（捕獲或冒泡），event.target 始終指向實際觸發事件的元素。

event.target 與 event.currentTarget 的區別

屬性描述
event.target指向實際觸發事件的元素（事件源頭），在事件傳播過程中不會改變
event.currentTarget指向當前正在處理事件的元素，在事件傳播過程中會改變
this在事件處理函數中，this 等同于 event.currentTarget

事件傳播中的 event.target

在事件傳播過程中：

  1. 捕獲階段：事件從 window 向下傳播到目標元素
  2. 目標階段：事件到達目標元素
  3. 冒泡階段：事件從目標元素向上傳播回 window

在整個過程中，event.target 始終指向最初觸發事件的元素，而 event.currentTarget 指向當前處理事件的元素。

實際應用場景

  1. 事件委托（Event Delegation）

    // 在父元素上處理所有子元素的事件
document.getElementById('parent').addEventListener('click', function(event) {if (event.target.classList.contains('item')) {console.log('點擊了項目:', event.target.dataset.id);}
});

  2. 動態元素處理

    // 處理動態添加的元素
document.getElementById('list').addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('點擊了列表項:', event.target.textContent);}
});

  3. 表單處理

    // 確定表單中哪個元素發生了變化
document.getElementById('myForm').addEventListener('input', function(event) {console.log('變化的元素:', event.target.name);console.log('新值:', event.target.value);
});

  4. 自定義組件

    // 在復雜組件中確定事件來源
component.addEventListener('click', function(event) {if (event.target.classList.contains('close-btn')) {this.close();} else if (event.target.classList.contains('save-btn')) {this.save();}
});

在 Vue 中使用 event.target

在 Vue 中，可以通過 $event 訪問原生事件對象：

<template><button @click="handleClick($event)">點擊我</button>
</template><script>
export default {methods: {handleClick(event) {console.log('點擊的元素:', event.target);console.log('元素文本:', event.target.textContent);}}
}
</script>

最佳實踐

  1. 優先使用事件委托：特別是對于動態內容或大量相似元素
  2. 結合元素屬性：使用 tagName, classList, dataset 等屬性精確識別元素
  3. 避免過度依賴 DOM 結構：使用 data 屬性而不是類名或標簽名進行標識
  4. 注意事件傳播：使用 event.stopPropagation() 控制事件傳播
  5. 在 Vue 中避免直接操作 DOM：盡可能使用 Vue 的響應式數據而非直接操作 event.target

通過理解 event.target 的工作原理和實際應用，您可以編寫更高效、更靈活的事件處理代碼。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/909394.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/909394.shtml
英文地址，請注明出處：http://en.pswp.cn/news/909394.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Flutter 小技巧之：實現 iOS 26 的 “液態玻璃”

Flutter 小技巧之：實現 iOS 26 的 “液態玻璃”

隨著 iOS 26 發布&#xff0c;「液態玻璃」無疑是熱度最高的標簽&#xff0c;不僅僅是因為設計風格大變&#xff0c;更是因為 iOS 26 beta1 的各種 bug 帶來的毛坯感讓 iOS 26 沖上熱搜&#xff0c;比如通知中心和控制中心看起來就像是一個半成品&#xff1a; 當然&#xff0c;…
閱讀更多...
Android工程中FTP加密傳輸與非加密傳輸的深度解析

Android工程中FTP加密傳輸與非加密傳輸的深度解析

詳細的FTP傳輸實現方案&#xff0c;包括完整代碼、安全實踐、性能優化和實際應用場景分析。 一、FTP傳輸類型對比表&#xff08;增強版&#xff09; 特性非加密FTPFTPS (FTP over SSL/TLS)SFTP (SSH File Transfer Protocol)協議基礎FTP (RFC 959)FTP SSL/TLS (RFC 4217)SSH…
閱讀更多...
C# 枚 舉(枚舉)

C# 枚 舉(枚舉)

枚舉 枚舉是由程序員定義的類型&#xff0c;與類或結構一樣。 與結構一樣&#xff0c;枚舉是值類型&#xff1a;因此直接存儲它們的數據&#xff0c;而不是分開存儲成引用和數據。枚舉只有一種類型的成員&#xff1a;命名的整數值常量。 下面的代碼展示了一個示例&#xff0c…
閱讀更多...
一文詳解前綴和：從一維到二維的高效算法應用

一文詳解前綴和：從一維到二維的高效算法應用

文章目錄 一、一維前綴和?1. 基本概念?2. C 代碼實現?3. 應用場景? 二、二維前綴和1. 基本概念?2. C 代碼實現?3. 應用場景? 三、總結? 在算法競賽和日常的數據處理工作中&#xff0c;前綴和是一種極其重要的預處理技術。它能夠在常數時間內回答多次區間查詢&#xff0…
閱讀更多...
windows 開發

windows 開發

文章目錄 環境搭建數據庫關鍵修改說明&#xff1a;在代碼中使用該連接字符串&#xff1a;注意事項&#xff1a;實際使用 都說幾天創造一個奇跡&#xff0c;現在是真的這樣了&#xff0c;Just do it! 環境搭建 數據庫 需要下載這個SQL Server數據庫&#xff0c;然后每次Visua…
閱讀更多...
免費OCPP協議測試工具

免費OCPP協議測試工具

免費OCPP 1.6J協議測試工具&#xff0c;簡單實用。除加密功能外&#xff08;后續版本支持&#xff09;&#xff0c;支持所有消息調試。 后續將添加2.01和和2.1協議支持. 歡迎使用 Charge-Test
閱讀更多...
高等數學基礎(行列式和矩陣的秩)

高等數學基礎(行列式和矩陣的秩)

行列式主要用于判斷矩陣是否可逆及計算特征方程 初見行列式 行列式起源于線性方程組求解 { a 11 x 1 a 12 x 2 b 1 a 21 x 1 a 22 x 2 b 2 \begin{cases} a_{11}x_1 a_{12}x_2 b_1 \\ a_{21}x_1 a_{22}x_2 b_2 \end{cases} {a11?x1?a12?x2?b1?a21?x1?a22?x2…
閱讀更多...
開心燦爛go開發面試題

開心燦爛go開發面試題

1.給你單鏈表的頭節點 head &#xff0c;請你反轉鏈表&#xff0c;并返回反轉后的鏈表。 示例1: 輸入&#xff1a;head [1,2,3,4,5] 輸出&#xff1a;[5,4,3,2,1] package main import “fmt” type ListNode struct { Val int Next *ListNode } func main() { l1 : &…
閱讀更多...
【Flutter】程序報錯導致的灰屏總結

【Flutter】程序報錯導致的灰屏總結

【Flutter】程序報錯導致的灰屏總結 一、前言 在 Flutter 中&#xff0c;出現“灰屏”&#xff08;grey screen&#xff09;通常意味著 應用發生了未捕獲的錯誤&#xff0c;導致框架無法正確構建 UI。 這也是在面試過程中常常問到的。 二、錯誤分類 常見的會導致灰屏的錯誤…
閱讀更多...
基于物聯網設計的智慧家庭健康醫療系統

基于物聯網設計的智慧家庭健康醫療系統

1. 項目開發背景 隨著物聯網&#xff08;IoT&#xff09;技術的發展&#xff0c;智能家居系統逐漸融入到我們的日常生活中&#xff0c;成為提高生活質量、增強家庭安全、提升健康管理的重要工具。特別是在健康醫療領域&#xff0c;借助物聯網技術&#xff0c;智能家居不僅能夠…
閱讀更多...
設計模式精講 Day 1：單例模式（Singleton Pattern）

設計模式精講 Day 1：單例模式（Singleton Pattern）

【設計模式精講 Day 1】單例模式&#xff08;Singleton Pattern&#xff09; 文章內容 開篇 在軟件開發中&#xff0c;設計模式是解決常見問題的通用解決方案。作為“設計模式精講”系列的第一天&#xff0c;我們將深入講解單例模式&#xff08;Singleton Pattern&#xff09…
閱讀更多...
【衛星通信】3GPP標準提案：面向NB-IoT（GEO）場景的IMS信令優化方案-降低衛星通信場景下的語音呼叫建立時延

【衛星通信】3GPP標準提案：面向NB-IoT（GEO）場景的IMS信令優化方案-降低衛星通信場景下的語音呼叫建立時延

一、引言 隨著5G非地面網絡&#xff08;NTN&#xff09;技術的演進&#xff0c;基于NB-IoT的衛星通信&#xff08;如GEO地球同步軌道衛星&#xff09;逐漸成為偏遠地區語音服務的重要補充。然而&#xff0c;傳統IP多媒體子系統&#xff08;IMS&#xff09;的信令流程在帶寬受限…
閱讀更多...
軟件測試之簡單基礎的安全測試方法（另外包含軟測面試題庫）

軟件測試之簡單基礎的安全測試方法（另外包含軟測面試題庫）

文章目錄 前言安全測試是什么簡單基礎的安全測試方法密碼安全操作權限驗證SQL注入xss腳本攻擊文件上傳下載安全漏洞掃描Web掃描APP掃描 面試題庫&#xff08;僅參考&#xff09;參考目錄 前言 閱讀本文前請注意最后編輯時間&#xff0c;文章內容可能與目前最新的技術發展情況相…
閱讀更多...
LCEL：LangChain 表達式語言詳解與測試工程師的實踐指南

LCEL：LangChain 表達式語言詳解與測試工程師的實踐指南

引言 在 AI 應用開發中&#xff0c;如何高效地組合多個步驟&#xff08;如提示模板、模型調用、輸出解析&#xff09;并優化執行流程&#xff0c;是開發者和測試工程師共同面臨的挑戰。LangChain Expression Language (LCEL) 作為 LangChain 的核心功能之一&#xff0c;提供了…
閱讀更多...
LeetCode面試經典150題—旋轉數組—LeetCode189

LeetCode面試經典150題—旋轉數組—LeetCode189

原題請見&#xff1a;Leetcode189-旋轉數組 1、題目描述 2、題目分析 首先容易想到的最簡單的方案&#xff0c;是算出來移動K步之后&#xff0c;新數組的每一個坐標與原坐標的映射關系&#xff0c;然后根據映射關系放到一個全新的數組&#xff0c;再把新數組的值賦給原數組。…
閱讀更多...
2.5 Rviz使用教程

2.5 Rviz使用教程

新建終端&#xff0c;鍵入命令 roslaunch wpr_simulation wpb_simple.launch 再新建終端&#xff0c;鍵入命令 rviz修改Fix Frame 為 base_footprint 點擊add之后選擇RobotModel 再增加一個LaserScan 選擇激光雷達話題 可視化效果 配置的兩種方法 1.在Gazebo運行的基礎上&…
閱讀更多...
基于SpringBoot+JSP開發的招投標采購信息平臺

基于SpringBoot+JSP開發的招投標采購信息平臺

角色&#xff1a; 管理員、普通用戶 技術&#xff1a; 后端&#xff1a;Spring Boot Mybatis-Plus MySQL 前端&#xff1a;JSP 核心功能&#xff1a; 該平臺是一個用于管理投標和招標信息的系統&#xff0c;主要提供信息發布、用戶管理和交易管理等核心功能。 功能介紹…
閱讀更多...
【項目實訓#10】HarmonyOS API文檔RAG檢索系統后端實現

【項目實訓#10】HarmonyOS API文檔RAG檢索系統后端實現

【項目實訓#10】HarmonyOS API文檔RAG檢索系統后端實現 文章目錄 【項目實訓#10】HarmonyOS API文檔RAG檢索系統后端實現一、背景簡介二、RAG技術原理與架構設計2.1 RAG技術原理回顧與提升2.2 系統架構設計 三、RAG引擎核心實現3.1 RAG引擎初始化3.2 查詢向量化3.3 文檔檢索實現…
閱讀更多...
專注于PLC數據采集MES交互解決方案

專注于PLC數據采集MES交互解決方案

專注于PLC數據采集MES交互解決方案 前篇文章我們講到當下的制造行業在工業4.0的大趨勢下&#xff0c;MES系統成為現場制造過程管制的有利武器&#xff0c;更是質量追蹤的一把好工具。我們要知道產品在各個加工環節的結果。除了人工在各個制造環節錄入制造結果外&#xff0c;更…
閱讀更多...
微信小程序實現文字逐行動畫效果渲染顯示

微信小程序實現文字逐行動畫效果渲染顯示

1. 微信小程序實現文字逐行動畫效果渲染顯示 在微信小程序開發中，為了文字逐行動畫效果渲染可以通過JavaScript 和 WXML 的動態數據綁定來實現，實現文字逐行顯示的效果，同時結合 CSS 動畫提升視覺體驗。 ??如果需要更復雜的動畫效果（如縮放、移動等），可以使用微信小程序…
閱讀更多...
最新文章

Copyright @ 2022~2023