1.使用事件委托為子節(jié)點(diǎn)綁定事件
<body>
<ul onclick="func(event)">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script>
function func(e){
console.log(e.target)
e.target.style.background="yellow"
}
</script>
2.e.target和this的區(qū)別
- 形參e是指事件對(duì)象,
它是事件的一系列相關(guān)數(shù)據(jù)的集合,由系統(tǒng)自動(dòng)創(chuàng)建,無(wú)需傳參,
事件對(duì)象只有在事件(比如onclick)存在時(shí)在存在
- e.target是返回觸發(fā)事件的對(duì)象
- e.target與this的區(qū)別
e.target返回的是 觸發(fā) 事件的對(duì)象或元素,
而this返回的是 綁定/調(diào)用 事件的對(duì)象或元素
比如:
在事件委托中,把點(diǎn)擊事件綁定給父節(jié)點(diǎn)(ul)時(shí),
this返回的是綁定點(diǎn)擊事件的元素,也就是ul
而e.target返回的是被點(diǎn)擊的某個(gè)子節(jié)點(diǎn),也就是li文章來源：http://www.zghlxwxcb.cn/news/detail-496542.html
3.vue中如何獲取DOM節(jié)點(diǎn)?
注:vue無(wú)需通過操作DOM節(jié)點(diǎn)來更新界面,也不推薦開發(fā)者直接操作DOM文章來源地址http://www.zghlxwxcb.cn/news/detail-496542.html
方法一:通過事件源來獲取當(dāng)前點(diǎn)擊的節(jié)點(diǎn)
- 不傳參
//html
<input type="button" value="點(diǎn)擊" v-on:click='fun'/>
//js
methods:{
fun:function(event){
console.log(event.target);
}
}
- 傳參
//html
<input type="button" value="點(diǎn)擊" v-on:click='fun($event.target)'/>
//js
methods:{
fun:function(e){
console.log(e);
}
}
方法二:通過ref來獲取當(dāng)前點(diǎn)擊的節(jié)點(diǎn)
//html
<input ref='name' type="button" value="點(diǎn)擊" v-on:click='fun'/>
//js
methods:{
fun(){
console.log(this.$refs.name);
}
}
方法三:使用自定義指令來獲取當(dāng)前點(diǎn)擊的節(jié)點(diǎn)
//html
<input type="button" value="點(diǎn)擊" v-get/>
//js(無(wú)需點(diǎn)擊就能獲取)
Vue.directive("get",{
bind:function(el){
console.log(el);
}
})
到了這里，關(guān)于2023-06-22 使用事件委托來為所有子節(jié)點(diǎn)綁定事件,e.target和this的區(qū)別,vue獲取DOM節(jié)點(diǎn)的常見方法的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![2023-06-10：給定一個(gè)由 n 個(gè)節(jié)點(diǎn)組成的網(wǎng)絡(luò)，用 n x n 個(gè)鄰接矩陣 graph 表示 在節(jié)點(diǎn)網(wǎng)絡(luò)中，只有當(dāng) graph[i][j] = 1 時(shí)，節(jié)點(diǎn) i 能夠直接連接到另一個(gè)節(jié)點(diǎn) j。](https://imgs.yssmx.com/Uploads/2024/02/478257-1.png)
![2023-05-12：存在一個(gè)由 n 個(gè)節(jié)點(diǎn)組成的無(wú)向連通圖，圖中的節(jié)點(diǎn)按從 0 到 n - 1 編號(hào)， 給你一個(gè)數(shù)組 graph 表示這個(gè)圖， 其中，graph[i] 是一個(gè)列表，由所有與節(jié)點(diǎn) i](https://imgs.yssmx.com/Uploads/2024/02/441245-1.png)
