Vuejs中使用addEventListener的事件触发执行函数的this

最新推荐文章于 2024-07-01 16:22:16 发布

schwarzeni

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量2.6w

点赞数 2

分类专栏： javascript vue

本文链接：https://blog.csdn.net/nzyalj/article/details/70568455

版权

javascript 同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

在普通的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的值为触发事件的dom节点

这里写图片描述

(另：有用的链接 => 传送门)

如果是使用vuejs中的自定义directive来触发点击事件，触发函数中的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>