一、 事件流
1.事件冒泡
const fa = document.querySelector('.father')const son = document.querySelector('.son')document.addEventListener('click', function () {alert('我是爺爺')})fa.addEventListener('click', function () {alert('我是爸爸')})son.addEventListener('click', function (e) {alert('我是兒子')// 組織流動傳播 事件對象.stopPropagation() 阻止事件冒泡，捕獲階段也有效e.stopPropagation()})2.事件解綁
<button>點擊</button><script>const btn = document.querySelector('button')// btn.onclick = function () {// alert('點擊了')// // L0 事件移除解綁// btn.onclick = null// }function fn() {alert('點擊了')}btn.addEventListener('click', fn)// L2 事件移除解綁 匿名函數無法解除綁定-必須調用函數btn.removeEventListener('click', fn)</script>注意：匿名函數無法解綁
3、鼠標經過事件
鼠標經過事件 的區別
? mouseover 和 mouseout 會有冒泡效果
mouseenter 和 mouseleave 沒有冒泡效果 (推薦)
二、事件委托
事件委托是利用事件流的特征解決一些開發需求的知識技巧
優點：減少注冊次數，可以提高程序性能
原理：事件委托其實是利用事件冒泡的特點。
給 父元素注冊事件 ，當我們觸發子元素的時候，會冒泡到父元素身上，從而觸發父元素的事
件
實現：事件對象.target. tagName 可以獲得真正觸發事件的元素
ulli 父子元元
ul.addEventListener('click' , function(){}) 執行父級點擊事件
<body><ul><li>第1個孩子</li><li>第2個孩子</li><li>第3個孩子</li><li>第4個孩子</li><li>第5個孩子</li><p>我不需要變色</p></ul><script>// 點擊每個小li 當前li 文字變為紅色// 按照事件委托的方式 委托給父級，事件寫到父級身上// 1. 獲得父元素const ul = document.querySelector('ul')ul.addEventListener('click', function (e) {// alert(11)// this.style.color = 'red'// console.dir(e.target) // 就是我們點擊的那個對象// 我的需求，我們只要點擊li才會有效果if (e.target.tagName === 'LI') {e.target.style.color = 'red'}})</script>
</body>阻止默認行為
<body><form action="http://www.itcast.cn"><input type="submit" value="免費注冊"></form><a href="http://www.baidu.com">百度一下</a><script>const form = document.querySelector('form')form.addEventListener('submit', function (e) {// 阻止默認行為 提交e.preventDefault()})const a = document.querySelector('a')a.addEventListener('click', function (e) {e.preventDefault()})</script>
</body>三、其他事件
1.頁面加載事件
- DOMContentLoaded：當初始HTML文檔完全加載和解析完成時觸發（無需等待樣式表、圖片等外部資源加載完成）。適用于需要盡早操作DOM的場景（如綁定事件監聽器）。
- load：當頁面所有資源（包括圖片、腳本、CSS等）完全加載后觸發。常用于需要依賴完整頁面內容的操作
document.addEventListener('DOMContentLoaded', () => {console.log('DOM已就緒，可安全操作元素');
});
window.addEventListener('load', () => {console.log('所有資源加載完成');
});2.元素滾動事件
- scroll：監聽元素滾動行為（如
window或可滾動div），觸發頻率高。通常結合防抖（debounce）或節流（throttle）優化性能。 - IntersectionObserver API：更高效的替代方案，可檢測元素是否進入視口（如懶加載圖片或無限滾動）。
// 傳統滾動監聽（需節流）
window.addEventListener('scroll', throttle(() => {console.log(window.scrollY);
}, 200));// IntersectionObserver實現懶加載
const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {entry.target.src = entry.target.dataset.src;observer.unobserve(entry.target);}});
});3.頁面尺寸事件
- resize：當窗口尺寸變化時觸發（如響應式布局調整）。需注意頻繁觸發問題，建議搭配節流。
- Visual Viewport API：針對移動端虛擬鍵盤彈出等場景，提供更精準的視口尺寸變化監聽。
// 監聽窗口尺寸變化
window.addEventListener('resize', throttle(() => {console.log(`當前寬度：${window.innerWidth}px`);
}, 500));// 移動端視覺視口變化（如鍵盤彈出）
window.visualViewport.addEventListener('resize', () => {console.log('視覺視口高度變化:', window.visualViewport.height);
});
![[C語言] C語言數學函數庫概覽](http://pic.xiahunao.cn/[C語言] C語言數學函數庫概覽)
