JavaScript的DOM事件詳解
更新時(shí)間：2022年02月11日 16:01:02 作者：執(zhí)手天涯@
這篇文章主要為大家詳細(xì)介紹了JavaScript的DOM事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
1、事件對(duì)象
【獲取事件對(duì)象】
- 什么是事件對(duì)象：是個(gè)對(duì)象，這個(gè)對(duì)象里有事件觸發(fā)時(shí)的相關(guān)信息。
- 事件對(duì)象的語(yǔ)法
元素.addEventListener('click',function(e){})【事件對(duì)象常用屬性】
- type：獲取當(dāng)前的事件類型
- clientX/clientY：獲取光標(biāo)相對(duì)于瀏覽器可見(jiàn)窗口左上角的位置
- offsetX/offsetY：獲取光標(biāo)相對(duì)于當(dāng)前DOM元素左上角的位置
- key：用戶按下的鍵盤(pán)的值
【案例】：
<!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、事件流
【解釋】： 事件流是指事件完整執(zhí)行過(guò)程中的流動(dòng)路徑
【圖解】：
【說(shuō)明】：
- 捕獲階段是從父到子
- 冒泡階段是從子到父
【什么是事件冒泡】 ：當(dāng)一個(gè)元素的事件被觸發(fā)時(shí)，同樣的事件將會(huì)在該元素的所有祖先元素中依次被觸發(fā)。
事件冒泡是默認(rèn)存在的。
【案例解釋】
<!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的根元素開(kāi)始去執(zhí)行對(duì)應(yīng)的事件。
【語(yǔ)法】
DOM.addEventListener(事件類型,事件處理函數(shù),是否使用捕獲機(jī)制)
【說(shuō)明】
- addEventListener第三個(gè)參數(shù)傳入true代表是捕獲階段觸發(fā)
- 若傳入false代表冒泡階段觸發(fā)，默認(rèn)就是false
- 原來(lái)的寫(xiě)法沒(méi)有捕獲只有冒泡階段
【阻止事件的流動(dòng)】
語(yǔ)法：
事件對(duì)象.stopProPagation()
說(shuō)明：
- 阻止事件的流動(dòng)，在捕獲和冒泡階段都有效
- mouseover 和 mouseout 會(huì)有冒泡效果
- mouseenter 和 mouseleave 沒(méi)有冒泡效果(推薦)
【阻止事件的默認(rèn)行為】
語(yǔ)法：
e.preventDefault()
3、事件委托
【解釋】： 將事件委托于其他元素進(jìn)行處理。
【優(yōu)點(diǎn)】： 給父級(jí)元素添加事件可以極大的優(yōu)化性能
【原理】： 利用事件冒泡的特點(diǎn)，給父級(jí)元素添加事件，子元素可以觸發(fā)
【語(yǔ)法】： 事件對(duì)象.target可以獲取得到真正觸發(fā)事件的元素
4、綜合案例
**【需求】：**點(diǎn)擊錄入按鈕，可以增加學(xué)生信息
<!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>新增學(xué)員</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">
就業(yè)城市：<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>就業(yè)榜</h1>
<table>
<thead>
<tr>
<th>學(xué)號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>薪資</th>
<th>就業(yè)城市</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//準(zhǔn)備好數(shù)據(jù)后端的數(shù)據(jù)
let arr = [
{ stuId: 1001, uname: '歐陽(yáng)霸天', 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')
// 封裝渲染數(shù)據(jù)的函數(shù)
function render() {
// 清空原來(lái)的數(shù)據(jù)
tbody.innerHTML = ''
for (let i = 0; i < arr.length; i++) {
// 創(chuàng)建tr
let tr = document.createElement('tr');
// 添加數(shù)據(jù)
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)
// 復(fù)原表單數(shù)據(jù)
uname.value = age.value = salary.value = ''
}
}
// 調(diào)用頁(yè)面加載函數(shù)
render();
// 添加數(shù)據(jù)操作
add.addEventListener('click', function () {
// 獲取表單的數(shù)據(jù) 添加到數(shù)組
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>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
javascript學(xué)習(xí)指南之回調(diào)問(wèn)題
回調(diào)函數(shù)被認(rèn)為是一種高級(jí)函數(shù)，一種被作為參數(shù)傳遞給另一個(gè)函數(shù)(在這稱作"otherFunction")的高級(jí)函數(shù)，回調(diào)函數(shù)會(huì)在otherFunction內(nèi)被調(diào)用(或執(zhí)行)?；卣{(diào)函數(shù)的本質(zhì)是一種模式(一種解決常見(jiàn)問(wèn)題的模式)，因此回調(diào)函數(shù)也被稱為回調(diào)模式。2016-04-04
Knockoutjs是一個(gè)JavaScript實(shí)現(xiàn)的MVVM框架.主要有如下幾個(gè)功能1. Declarative bindings2. Observables and dependency tracking3. Templating,需要了解的朋友可以參考下2012-12-12
深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解
這篇文章主要介紹了深入理解JavaScript系列（19）：求值策略(Evaluation strategy)詳解,本文講解了一般理論、按值傳遞、按引用傳遞、按共享傳遞（Call by sharing）、按共享傳遞是按值傳遞的特例等內(nèi)容,需要的朋友可以參考下2015-03-03
javascrpt綁定事件之匿名函數(shù)無(wú)法解除綁定問(wèn)題
經(jīng)常聽(tīng)到有人說(shuō)，匿名函數(shù)綁定事件不好控制啊，無(wú)法解除綁定啊，本文將介紹詳細(xì)的解決方法，需要的朋友可以參考下2012-12-12
這篇文章主要介紹了JavaScript中用于四舍五入的Math.sin()方法講解,是JS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
這篇文章主要介紹JavaScript編程中的對(duì)象概念,也是JS面向?qū)ο缶幊痰幕A(chǔ)知識(shí),需要的朋友可以參考下2015-10-10
JavaScript入門(mén)教程(6) Window窗口對(duì)象
他是JavaScript中最大的對(duì)象，它描述的是一個(gè)瀏覽器窗口。一般要引用它的屬性和方法時(shí)，不需要用“window.xxx”這種形式，而直接使用“xxx”。一個(gè)框架頁(yè)面也是一個(gè)窗口。2009-01-01
巧用get和set，能夠直接操作對(duì)象屬性實(shí)現(xiàn)讀寫(xiě)，可以極大的提高編程效率，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-02
淺談javascript構(gòu)造函數(shù)與實(shí)例化對(duì)象
JavaScript 中的構(gòu)造函數(shù)和其它語(yǔ)言中的構(gòu)造函數(shù)是不同的。 通過(guò) new 關(guān)鍵字方式調(diào)用的函數(shù)都被認(rèn)為是構(gòu)造函數(shù)。任何JavaScript 函數(shù)都可以用做構(gòu)造函數(shù)，構(gòu)造函數(shù)必須 使用new 運(yùn)算符作為前綴來(lái)創(chuàng)建新的實(shí)例。2015-06-06
本文并沒(méi)有詳細(xì)的介紹js所有的操作符，只是就js在操作符上與其它常用語(yǔ)言不一樣的獨(dú)特之處列舉一二，了解了這些，至少不會(huì)讓我們?cè)谧x一些開(kāi)源框架js代碼時(shí)一頭霧水，并且可以讓我們的js代碼更簡(jiǎn)潔、更安全（少出bug）。2014-11-11