目錄
前言
事件對象
目標
事件對象是什么
語法
獲取事件對象
部分常用屬性
示例代碼
示例代碼：評論回車發布
總結
前言
長風破浪會有時，直掛云帆濟滄海。
事件對象
目標
能說出什么是事件對象
事件對象是什么
也是個對象，這個對象里有事件觸發時的相關信息例如:鼠標點擊事件中，事件對象就存了鼠標點在哪個位置等信息
使用場景可以判斷用戶按下哪個鍵，比如按下回車鍵可以發布新聞
可以判斷鼠標點擊了哪個元素，從而做相應的操作
語法
如何獲取
在事件綁定的回調函數的第一個參數就是事件對象
一般命名為event，ev，e
元素.addEventListener('click'，function(e){}//e為事件對象
獲取事件對象
目標：能夠使用常見事件對象屬性
部分常用屬性
type口 獲取當前的事件類型>
clientX/clientY口 獲取光標相對于瀏覽器可見窗口左上角的位置>
offsetX/offsetY獲取光標相對于當前DOM元素左上角的位置 key口 用戶按下的鍵盤鍵的值口 現在不提倡使用keyCode
示例代碼
<!DOCTYPE html>
<html lang="en">
?
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
?
<body><button>按鈕</button><script>const btn = document.querySelector('button');btn.addEventListener('click', function (e) {console.log(e.type);});</script>
</body>
?
</html>示例代碼：評論回車發布
<!DOCTYPE html>
<html lang="en">
?
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Input Box</title><style>body {font-family: Arial, sans-serif;}
?.input-container {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom: 10px;width: 500px;}
?textarea {width: 70%;height: 100px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;resize: none;position: relative;/* 設置相對定位，以便偽元素可以絕對定位 */box-sizing: border-box;/* 確保內邊距和邊框包含在寬度內 */}
?textarea::after {content: '龐嘉欣專屬評論框';/* 偽元素內容 */position: absolute;/* 絕對定位 */bottom: 5px;/* 距離底部 5px */right: 5px;/* 距離右側 5px */font-size: 0.8em;/* 字體大小 */color: #888;/* 字體顏色 */pointer-events: none;/* 確保偽元素不影響交互 */z-index: 1;/* 確保偽元素在內容之上 */}
?.button-counter-container {display: flex;flex-direction: column;align-items: flex-end;}
?button {padding: 20px 20px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;margin-bottom: 10px;margin-right: 40px;margin-top: 10px;}
?.counter {text-align: right;margin-right: 50px;margin-top: 25px;}
?.counter span {font-weight: bold;}
?#comments-container {margin-top: 20px;width: 500px;}
?.comment {margin-bottom: 10px;padding: 10px;border: 1px solid rgba(0, 0, 0, 0.5);border-radius: 5px;background-color: #ffffff;}
?.comment-time {font-size: 0.9em;color: #888;margin-top: 5px;display: flex;justify-content: space-between;align-items: center;}
?.comment-time span {font-size: 0.8em;color: #888;}</style>
</head>
?
<body><div class="input-container"><textarea id="input-text" placeholder="發布一條友善的評論"></textarea><div class="button-counter-container"><button id="submit-button">發布</button><div class="counter"><span id="current-count">0</span>/200字</div></div></div>
?<div id="comments-container"></div>
?<script>document.addEventListener('DOMContentLoaded', function () {const inputText = document.getElementById('input-text');const currentCount = document.getElementById('current-count');const submitButton = document.getElementById('submit-button');const commentsContainer = document.getElementById('comments-container');
?inputText.addEventListener('input', function () {const count = inputText.value.length;currentCount.textContent = count;});
?function addComment() {const commentText = inputText.value.trim();if (commentText) {const now = new Date();const formattedTime = now.toLocaleString();
?const commentElement = document.createElement('div');commentElement.className = 'comment';
?const commentContent = document.createElement('span');commentContent.textContent = commentText;
?const commentTime = document.createElement('div');commentTime.className = 'comment-time';
?const timeSpan = document.createElement('span');timeSpan.textContent = formattedTime;
?const signatureSpan = document.createElement('span');signatureSpan.textContent = '^-^';signatureSpan.style.fontSize = '0.8em';signatureSpan.style.color = '#87CEEB';
?commentTime.appendChild(timeSpan);commentTime.appendChild(signatureSpan);
?commentElement.appendChild(commentContent);commentElement.appendChild(commentTime);
?commentsContainer.appendChild(commentElement);
?inputText.value = '';currentCount.textContent = '0';}}
?submitButton.addEventListener('click', addComment);
?inputText.addEventListener('keydown', function (event) {if (event.key === 'Enter' && !event.shiftKey) {event.preventDefault();addComment();}});});</script>
</body>
?
</html>總結
千磨萬擊還堅勁，任爾東西南北風。
-AutoSAR CP分層架構(2))