Vuejs使用addEventListener的事件如何觸發(fā)執(zhí)行函數(shù)的this

更新時(shí)間：2022年06月29日 16:01:46 作者：schwarzeni

這篇文章主要介紹了Vuejs使用addEventListener的事件觸發(fā)執(zhí)行函數(shù)的this方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用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)

(另：有用的鏈接 => 傳送門)

如果是使用vuejs中的自定義directive來觸發(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)過測(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指向問題

看代碼

//定義一個(gè)可見的盒子用于綁定點(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 說明該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è)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: