事件流
事件流是對事件執(zhí)行過程的描述
事件捕獲
從DOM的根元素開始去執(zhí)行對應的事件 (從外到里)
事件冒泡
當一個元素的事件被觸發(fā)時，同樣的事件將會在該元素的所有祖先元素中依次被觸發(fā)。這一過程被稱為事件冒 泡
-
addEventListener?第3個參數(shù)決定了事件是在捕獲階段觸發(fā)還是在冒泡階段觸發(fā) -
addEventListener?第3個參數(shù)為?true?表示捕獲階段觸發(fā)，false?表示冒泡階段觸發(fā)，默認值為?false - 事件流只會在父子元素具有相同事件類型時才會產生影響
- 絕大部分場景都采用默認的冒泡模式
阻止冒泡?
// 組織流動傳播 ?事件對象.stopPropagation()
? ? ? e.stopPropagation()
我們某些情況下需要阻止
元素默認行為
默認行為的發(fā)生，比如 阻止 鏈接的跳轉，表單域跳轉
注意：
此方法可以阻斷事件流動傳播，不光在冒泡階段有效，捕獲階段也有效
解綁事件
on事件方式，直接使用null覆蓋偶就可以實現(xiàn)事件的解綁
addEventListener方式，必須使用：
removeEventListener(事件類型, 事件處理函數(shù), [獲取捕獲或者冒泡階段])
注意：匿名函數(shù)無法被解綁
<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>
鼠標經(jīng)過事件：
- ? mouseover 和 mouseout 會有冒泡效果
- ? mouseenter 和 mouseleave 沒有冒泡效果 (推薦)
事件委托
事件委托是利用事件流的特征解決一些現(xiàn)實開發(fā)需求的知識技巧，主要的作用是提升程序效率。
原理：事件委托其實是利用事件冒泡的特點。
- ?給父元素注冊事件，當我們觸發(fā)子元素的時候，會冒泡到父元素身上，從而觸發(fā)父元素的事 件
?
實現(xiàn)：事件對象.target. tagName 可以獲得真正觸發(fā)事件的元素
<script>
// 點擊每個小li 當前l(fā)i 文字變?yōu)榧t色
// 按照事件委托的方式 委托給父級，事件寫到父級身上
// 1. 獲得父元素
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
// alert(11)
// this.style.color = 'red'
// console.dir(e.target) // 就是我們點擊的那個對象
// e.target.style.color = 'red'
// 我的需求，我們只要點擊li才會有效果
if (e.target.tagName === 'LI') {
e.target.style.color = 'red'
}其他事件
頁面加載事件
加載外部資源（如圖片、外聯(lián)CSS和JavaScript等）加載完畢時觸發(fā)的事件
有些時候需要等頁面資源全部處理完了做一些事情
事件名：load
監(jiān)聽頁面所有資源加載完畢：
?
監(jiān)聽整個頁面資源給
window
加
window.addEventListener('load', function() {
// xxxxx
})
事件名
：DOMContentLoaded
當初始的 HTML 文檔被完全加載和解析完成之后，DOMContentLoaded 事件被觸發(fā)，而無需等待樣式表、圖像等完 全加載
?
給
document
加
元素滾動事件
滾動條在滾動的時候持續(xù)觸發(fā)的事件文章來源：http://www.zghlxwxcb.cn/news/detail-449253.html
window.addEventListener('scroll', function() {
// xxxxx
})
頁面滾動事件-獲取位置
?
scrollLeft和scrollTop （屬性）
- 獲取被卷去的大小
- 獲取元素內容往左、往上滾出去看不到的距離
- 這兩個值是可讀寫的
盡量在scroll事件里面獲取被卷去的距離
document.documentElement HTML 文檔返回對象為HTML元素
滾動到指定的坐標
- scrollTo() 方法可把內容滾動到指定的坐標
- 語法： 元素.scrollTo(x, y)
頁面尺寸事件
會在窗口尺寸改變的時候觸發(fā)事件：文章來源地址http://www.zghlxwxcb.cn/news/detail-449253.html
window.addEventListener('resize', function() {
// xxxxx
})
獲取寬高：
- 獲取元素的可見部分寬高（不包含邊框，margin，滾動條等）
- clientWidth和clientHeight
元素尺寸于位置
獲取寬高：
- 獲取元素的自身寬高、包含元素自身設置的寬高、padding、border
- offsetWidth和offsetHeight
- 獲取出來的是數(shù)值,方便計算
- 注意: 獲取的是可視寬高, 如果盒子是隱藏的,獲取的結果是0
l獲取位置：
- 獲取元素距離自己定位父級元素的左、上距離
- offsetLeft和offsetTop 注意是只讀屬性
2.
element.getBoundingClientRect()
方法返回元素的大小及其相對于視口的位置
到了這里，關于JavaScript 基礎 DOM （二）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
