js事件
在前端頁面中，js程序大多數是由事件來驅動的，當觸發某些事件的時候，可以使用js負責響應。
js事件由三部分組成:?
?? ?事件源——》指的是被觸發的對象;?
?? ?事件類型——》如何觸發的事件，如:鼠標單擊、雙擊、鍵盤操作等;?
?? ?事件處理程序——》觸發事件以后，使用一個函數來處理。?因此事件步驟:?
?? ?1. 獲取事件源對象;?
?? ?2. 注冊事件;
?? ?3. 添加處理程序。?
事件類型
?
?
?
事件的注冊方式
1.靜態注冊 在html標簽中注冊 （如果元素是通過js創建的 ，就沒法這樣注冊）
2.動態注冊 在js代碼中注冊
<!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>.box{width: 200px;height: 200px;background-color: aqua;}</style></head><body><!-- onclick 單擊事件 --><button onclick="clickEvent()" ondblclick="dblclickEvent()">我是按鈕</button><input id="phone-input" onfocus="focusEvent()" onblur="blurEvent()"><span id="check-text" style="display: none;">格式正確</span><div class="box" onmouseover="mouseoverEvent()"onmouseout="mouseoutEvent()"></div></body>
<script>//入口函數//可以方式js代碼 先于html代碼加載 導致 元素獲取失敗的問題window.onload = function () {console.log('加載完成了')console.log(document.querySelector('button'))}function clickEvent() {console.log('單擊')}function dblclickEvent() {console.log('雙擊')}function focusEvent() {console.log('獲取到焦點')console.log('請輸入手機號')}function blurEvent() {//當失去焦點的時候驗證手機號正確性console.log('開始驗證手機號');let phoneInput = document.getElementById('phone-input')let phone = phoneInput.valuelet text = document.getElementById('check-text');text.style.display = 'inline';//驗證手機號let reg = /^1[3456789]\d{9}$/if (reg.test(phone)) {text.innerText = '格式正確'text.style.color = '#00acff'} else {text.innerText = '格式有誤'text.style.color = 'red'}}function mouseoverEvent(){console.log('鼠標劃入')}function mouseoutEvent(){console.log('鼠標劃出')}
</script></html> // false代表 事件冒泡 從下往上 默認的// true代表 事件捕獲， 從上往下 document.getElementById('one').addEventListener('click', function () {console.log('one被點擊了')},false)document.getElementById('two').addEventListener('click', function () {console.log('two被點擊了')},false)document.getElementById('three').addEventListener('click', function () {console.log('three被點擊了')},false)
option
false的話 就是事件冒泡了 從子元素到父元素
true的話 ??就是事件捕獲 從父到子！true 的觸發順序總是在 false 之前；
?如果多個均為 true，則外層的觸發先于內層；
?如果多個均為 false，則內層的觸發先于外層。
Event事件對象
事件對象e，是event的簡稱。當一個事件被觸發時候，這個事件的有關數據都會被存儲在一個事件對象e里面，這個對象e有許多固定方法提供給我們查看里面各種數據。?
Bom操作
<!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>body{height: 3000px;}.top-layout{width: 100%;height: 80px;background-color: blue;display: none;position: fixed;top: 0;}.goTop-btn{width: 50px;height: 50px;background-color: blue;border-radius: 50%;position: fixed;right: 100px;bottom: 100px;display: none;}</style>
</head>
<body><div class="top-layout"></div><div class="goTop-btn"></div></body><script>/*bom代表操作瀏覽器頁面的放大縮小 ， 頁面的滾動， 瀏覽器加載情況*///監聽瀏覽器加載完畢 方式1window.onload = function(){}//方式2window.addEventListener('load',function(){})//監聽瀏覽器大小的改變window.addEventListener('resize',function(e){// console.log(window.innerWidth,window.innerHeight)})//獲取 頂部欄目 和 按鈕let topBtn= document.querySelector('.goTop-btn')let topLayout= document.querySelector('.top-layout');//監聽瀏覽器滾動條滾動window.addEventListener('scroll',function(e){//獲取當前滾動條的滑動距離let top = document.documentElement.scrollTop;if(top>1000){topLayout.style.display='block'topBtn.style.display='block'}else{topLayout.style.display='none'topBtn.style.display='none'}})//點擊按鈕 回到頂部topBtn.addEventListener('click',function(){window.scrollTo({top:0,behavior:"smooth"})})
</script>
</html>定時器
//定時器 1 setTimeout// function 延遲執行的函數,延遲的時間 let timeOut = setTimeout(function(){console.log(123)// 清除定時器// clearTimeout(this);},2000);function clearTime(){clearTimeout(timeOut);} // 循環執行的定時器：輪播圖，倒計時，循環請求let setTime= setInterval(function(){console.log("我被執行了")},1000)function clearTime(){clearInterval(setTime)}?
?
?
)
