DOM-事件基礎
一.事件
1.事件
目標：能夠給 DOM元素添加事件監聽
事件:事件是在編程時系統內發生的動作或者發生的事情，比如用戶在網頁上單擊一個按鈕
事件監聽:就是讓程序檢測是否有事件產生，一旦有事件觸發，就立即調用一個函數做出響應，也稱為 注冊事件
語法:
事件監聽三要素:
- 事件源： 那個dom元素被事件觸發了，要獲取dom元素
- 事件： 用什么方式觸發，比如鼠標單擊 click、鼠標經過 mouseover 等
- 事件調用的函數： 要做什么事
舉例說明:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件監聽</title>
</head>
<body><button>點擊我</button><script>//1.獲取按鈕元素let btn = document.querySelector('button')//2.事件監聽 綁定事件 注冊事件 事件偵聽// 事件源.addEventListener('事件',事件處理函數)btn.addEventListener('click',function(){alert('月薪過萬')})</script>
</body>
</html>案例：淘寶點擊關閉二維碼
需求：點擊關閉之后，淘寶二維碼關閉 案例 分析： ①：點擊的是關閉按鈕 ②：關閉的是父盒子 核心：利用樣式的顯示和隱藏完成， display:none 隱藏元素 display:block 顯示元素?
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.erweima {position: relative;width: 160px;height: 160px;margin: 100px auto;border: 1px solid #ccc;}.erweima i {position: absolute;left: -13px;top: 0;width: 10px;height: 10px;border: 1px solid #ccc;font-size: 12px;line-height: 10px;color: #ccc;font-style: normal;cursor: pointer;}</style>
</head><body><div class="erweima"><img src="./images/code.png" alt=""><i class="close_btn">x</i></div><script>//1.獲取元素 事件源i 關閉的二維碼erweimalet close_btn = document.querySelector('.close_btn')let erweima = document.querySelector('.erweima')//2.事件監聽close_btn .addEventListener('click',function(){//erweima 關閉 他是隱蔽的erweima.style.display = 'none'})</script>
</body></html>案例：隨機點名
需求：點擊按鈕之后，隨機顯示一個名字，如果沒有顯示則禁用按鈕 案例 分析： ①：點擊的是按鈕 ②：隨機抽取一個名字 ③： 當名字抽取完畢，則利用 disabled 設置為 true
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 200px;height: 40px;border: 1px solid pink;text-align: center;line-height: 40px;}</style>
</head>
<body><div>開始抽獎吧</div><button>點擊點名</button><script>//1.獲取元素 div 和 buttonlet box = document.querySelector('div')let btn = document.querySelector('button')//2.隨機函數function getRandom(min,max){return Math.floor(Math.random()*(max - min + 1)) + min} //聲明一個數組let arr = ['趙云','黃忠','關羽','張飛','馬超','劉備','曹操','pink老師']//3.事件監聽btn.addEventListener('click',function(){//隨機的數字let random = getRandom(0,arr.length - 1)console.log(arr[random])box.innerHTML = arr[random]//刪除數組里面的元素 splice(從那里刪，刪幾個)arr.splice(random,1)//如果數組里面剩下最后一個，就要禁用按鈕if (arr.length === 1){// console.log('最后一個')btn.disabled = truebtn.innerHTML = '已經抽完'}})</script>
</body>
</html>
 技術應用實踐)
--樣本不平衡)
開發平臺的部署架構？)