JavaScript的DOM事件詳解
1、事件對象
【獲取事件對象】
- 什麼是事件對象:是個對象,這個對象裡有事件觸發時的相關信息。
- 事件對象的語法
元素.addEventListener('click',function(e){})
【事件對象常用屬性】
- type:獲取當前的事件類型
- clientX/clientY:獲取光標相對於瀏覽器可見窗口左上角的位置
- offsetX/offsetY:獲取光標相對於當前DOM元素左上角的位置
- key:用戶按下的鍵盤的值
【案例】:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { position: absolute; top: 0; left: 0; } </style> </head> <body> <img src="./images/tianshi.gif" alt=""> <script> let img = document.querySelector('img') document.addEventListener('mousemove', function (e) { img.style.top = e.pageY-40 + 'px' img.style.left = e.pageX-50 + 'px' }) </script> </body> </html>
2、事件流
【解釋】: 事件流是指事件完整執行過程中的流動路徑
【圖解】:
【說明】:
- 捕獲階段是從父到子
- 冒泡階段是從子到父
【什麼是事件冒泡】 :當一個元素的事件被觸發時,同樣的事件將會在該元素的所有祖先元素中依次被觸發。
事件冒泡是默認存在的。
【案例解釋】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { margin: 100px auto; width: 500px; height: 500px; background-color: pink; } .son { width: 200px; height: 200px; background-color: purple; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script> let fa = document.querySelector('.father') let son = document.querySelector('.son') fa.addEventListener('click', function () { alert('我是爸爸') }, true) son.addEventListener('click', function () { alert('我是兒子') }, true) document.addEventListener('click', function () { alert('我是爺爺') }, true) // btn.onclick = function() {} </script> </body> </html>
【事件捕獲概念】: 從DOM的根元素開始去執行對應的事件。
【語法】
DOM.addEventListener(事件類型,事件處理函數,是否使用捕獲機制)
【說明】
- addEventListener第三個參數傳入true代表是捕獲階段觸發
- 若傳入false代表冒泡階段觸發,默認就是false
- 原來的寫法沒有捕獲隻有冒泡階段
【阻止事件的流動】
語法:
事件對象.stopProPagation()
說明:
- 阻止事件的流動,在捕獲和冒泡階段都有效
- mouseover 和 mouseout 會有冒泡效果
- mouseenter 和 mouseleave 沒有冒泡效果(推薦)
【阻止事件的默認行為】
語法:
e.preventDefault()
3、事件委托
【解釋】: 將事件委托於其他元素進行處理。
【優點】: 給父級元素添加事件可以極大的優化性能
【原理】: 利用事件冒泡的特點,給父級元素添加事件,子元素可以觸發
【語法】: 事件對象.target可以獲取得到真正觸發事件的元素
4、綜合案例
**【需求】:**點擊錄入按鈕,可以增加學生信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/user.css"> </head> <body> <h1>新增學員</h1> <div class="info"> 姓名:<input type="text" class="uname"> 年齡:<input type="text" class="age"> 性別: <select name="gender" id="" class="gender"> <option value="男">男</option> <option value="女">女</option> </select> 薪資:<input type="text" class="salary"> 就業城市:<select name="city" id="" class="city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="廣州">廣州</option> <option value="深圳">深圳</option> <option value="曹縣">曹縣</option> </select> <button class="add">錄入</button> </div> <h1>就業榜</h1> <table> <thead> <tr> <th>學號</th> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>薪資</th> <th>就業城市</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> //準備好數據後端的數據 let arr = [ { stuId: 1001, uname: '歐陽霸天', age: 19, gender: '男', salary: '20000', city: '上海' }, { stuId: 1002, uname: '令狐霸天', age: 29, gender: '男', salary: '30000', city: '北京' }, { stuId: 1003, uname: '諸葛霸天', age: 39, gender: '男', salary: '2000', city: '北京' }, ] // 獲取元素 let tbody = document.querySelector('tbody'); // 獲取錄入按鈕 let add = document.querySelector('.add'); // 獲取表單元素 let uname = document.querySelector('.uname') let age = document.querySelector('.age') let gender = document.querySelector('.gender') let salary = document.querySelector('.salary') let city = document.querySelector('.city') // 封裝渲染數據的函數 function render() { // 清空原來的數據 tbody.innerHTML = '' for (let i = 0; i < arr.length; i++) { // 創建tr let tr = document.createElement('tr'); // 添加數據 tr.innerHTML = ` <td>${arr[i].stuId}</td> <td>${arr[i].uname}</td> <td>${arr[i].age}</td> <td>${arr[i].gender}</td> <td>${arr[i].salary}</td> <td>${arr[i].city}</td> <td> <a href="javascript:" id=${i}>刪除</a> </td> ` tbody.appendChild(tr) // 復原表單數據 uname.value = age.value = salary.value = '' } } // 調用頁面加載函數 render(); // 添加數據操作 add.addEventListener('click', function () { // 獲取表單的數據 添加到數組 arr.push({ stuId: arr[arr.length - 1].stuId + 1, uname: uname.value, age: age.value, gender: gender.value, salary: salary.value, city: city.value }) render(); }) // 刪除操作 tbody.addEventListener('click', function (e) { if (e.target.tagName === 'A') { arr.splice(e.target.id, 1) render() } }) </script> </body> </html>
總結
本篇文章就到這裡瞭,希望能夠給你帶來幫助,也希望您能夠多多關註WalkonNet的更多內容!
推薦閱讀:
- JavaScript之BOM構成和常用事件詳解
- JavaScript事件的委托(代理)的用法示例詳解
- javascript實現倒計時關閉廣告
- JavaScript阻止事件冒泡的方法
- JavaScript實現簡單省市聯動