溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了JavaScript中DOM事件的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
【獲取事件對象】
什么是事件對象：是個對象，這個對象里有事件觸發時的相關信息。
事件對象的語法
元素.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>【解釋】： 事件流是指事件完整執行過程中的流動路徑
【圖解】：
【說明】：
捕獲階段是從父到子
冒泡階段是從子到父
【什么是事件冒泡】 ：當一個元素的事件被觸發時，同樣的事件將會在該元素的所有祖先元素中依次被觸發。
事件冒泡是默認存在的。
【案例解釋】
<!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()
【解釋】： 將事件委托于其他元素進行處理。
【優點】： 給父級元素添加事件可以極大的優化性能
【原理】： 利用事件冒泡的特點，給父級元素添加事件，子元素可以觸發
【語法】： 事件對象.target可以獲取得到真正觸發事件的元素
**【需求】：**點擊錄入按鈕，可以增加學生信息
<!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>
<h2>新增學員</h2>
<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>
<h2>就業榜</h2>
<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>感謝你能夠認真閱讀完這篇文章，希望小編分享的“JavaScript中DOM事件的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
