Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this
使用addEventListener事件觸發(fā)執(zhí)行函數(shù)的this
在普通的dom操作中,若是使用addEventListener
如下面的例子
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="btn_container"> <button id="btn">Click Me</button> </div> <script src="test.js"></script> </body> </html>
let fn = function() { console.log(this); }; document.getElementById('btn').addEventListener('click',fn);
那么,在控制臺(tái)中輸出的this的值為觸發(fā)事件的dom節(jié)點(diǎn)
(另:有用的鏈接 => 傳送門(mén))
如果是使用vuejs中的自定義directive來(lái)觸發(fā)點(diǎn)擊事件,觸發(fā)函數(shù)中的this又是什么呢
/** * 這是vuejs的一個(gè)模塊 */ <template> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3"> <button class="btn btn-primary" v-myOn:click="fn">Click me</button> </div> </div> </div> </template> <script> export default { directives: { myOn: { bind(el, binding, vnode) { const event = binding.arg; const fn = binding.value; console.log(el); el.addEventListener(event, fn); } } }, methods: { fn() { console.log(this); } } } </script>
經(jīng)過(guò)測(cè)試,這里控制臺(tái)輸出的this的值為:
這是一個(gè)虛擬dom的值,其中 $el的值為 div.container ,也就是此模塊最外層的dom節(jié)點(diǎn),但是此事件綁定的是button,控制臺(tái)中輸出的bind的第一個(gè)el的值為
那么,在測(cè)試一次,在此 <div class='container'> 的外層再添加一個(gè) <div class='outer-container'>
測(cè)試結(jié)果如下:
$el 的值依然為最外層的dom節(jié)點(diǎn)
結(jié)論:Vuejs中若是使用自定義的directive綁定事件,那么觸發(fā)事件后執(zhí)行函數(shù)中的this指向此模塊最外層的dom節(jié)點(diǎn)
addEventListener中事件函數(shù)的this指向問(wèn)題
看代碼
//定義一個(gè)可見(jiàn)的盒子用于綁定點(diǎn)擊事件 var box = document.getElementById('box'); box.x = 'box' //設(shè)置執(zhí)行函數(shù)的對(duì)象屬性 function outFunc() { ? this.x = 'outFunc'; ? box.addEventListener('click', func, false); } outFunc(); function func() { ? console.log(this.x); //輸出box 說(shuō)明該this指向的是調(diào)用addEventListener的對(duì)象 }
代碼2
function outFunc() { ? this.x = 'outFunc';//給全局對(duì)象window.x賦值(相當(dāng)于賦值全局變量) ? box.addEventListener('click', func.bind(this), false); } function func() { ? console.log(this.x); //輸出outFunc 使用bind設(shè)置this的值 }
總結(jié):使用bind綁定的事件才是指向函數(shù),否則指向的是調(diào)用addEventListener的對(duì)象。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動(dòng)態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動(dòng)態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03vue如何解決axios請(qǐng)求前端跨域問(wèn)題
vue項(xiàng)目中,前端使用axios與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候,如果后臺(tái)沒(méi)有設(shè)置跨域,瀏覽器做數(shù)據(jù)請(qǐng)求的時(shí)候就會(huì)報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue如何解決axios請(qǐng)求前端跨域問(wèn)題的相關(guān)資料,需要的朋友可以參考下2021-10-10Vue實(shí)現(xiàn)開(kāi)始時(shí)間和結(jié)束時(shí)間范圍查詢(xún)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)開(kāi)始時(shí)間和結(jié)束時(shí)間的范圍查詢(xún),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$promp
這篇文章主要介紹了Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕的加載效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07