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);
那么,在控制臺中輸出的this的值為觸發(fā)事件的dom節(jié)點(diǎn)
(另:有用的鏈接 => 傳送門)
如果是使用vuejs中的自定義directive來觸發(fā)點(diǎn)擊事件,觸發(fā)函數(shù)中的this又是什么呢
/** * 這是vuejs的一個模塊 */ <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)過測試,這里控制臺輸出的this的值為:
這是一個虛擬dom的值,其中 $el的值為 div.container ,也就是此模塊最外層的dom節(jié)點(diǎn),但是此事件綁定的是button,控制臺中輸出的bind的第一個el的值為
那么,在測試一次,在此 <div class='container'> 的外層再添加一個 <div class='outer-container'>
測試結(jié)果如下:
$el 的值依然為最外層的dom節(jié)點(diǎn)
結(jié)論:Vuejs中若是使用自定義的directive綁定事件,那么觸發(fā)事件后執(zhí)行函數(shù)中的this指向此模塊最外層的dom節(jié)點(diǎn)
addEventListener中事件函數(shù)的this指向問題
看代碼
//定義一個可見的盒子用于綁定點(diǎn)擊事件 var box = document.getElementById('box'); box.x = 'box' //設(shè)置執(zhí)行函數(shù)的對象屬性 function outFunc() { ? this.x = 'outFunc'; ? box.addEventListener('click', func, false); } outFunc(); function func() { ? console.log(this.x); //輸出box 說明該this指向的是調(diào)用addEventListener的對象 }
代碼2
function outFunc() { ? this.x = 'outFunc';//給全局對象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的對象。
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue內(nèi)置動態(tài)組件component使用示例小結(jié)
component是vue內(nèi)置組件,主要作用為動態(tài)渲染組件,這篇文章主要介紹了vue內(nèi)置動態(tài)組件component使用示例小結(jié),需要的朋友可以參考下2024-03-03Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$promp
這篇文章主要介紹了Vue給?elementUI?中的?this.$confirm、this.$alert、?this.$prompt添加按鈕的加載效果,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07