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

目录
  • 使用addEventListener事件触发执行函数的this
    • 如下面的例子
  • addEventListener中事件函数的this指向问题
    • 看代码
    • 代码2

使用addEventListener事件触发执行函数的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的值为触发事件的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>

经过测试，这里控制台输出的this的值为：

这是一个虚拟dom的值，其中 $el的值为 div.container ,也就是此模块最外层的dom节点，但是此事件绑定的是button，控制台中输出的bind的第一个el的值为

那么，在测试一次，在此 <div class='container'> 的外层再添加一个 <div class='outer-container'>

测试结果如下：

$el 的值依然为最外层的dom节点

结论：Vuejs中若是使用自定义的directive绑定事件，那么触发事件后执行函数中的this指向此模块最外层的dom节点

addEventListener中事件函数的this指向问题

看代码

//定义一个可见的盒子用于绑定点击事件
var box = document.getElementById('box');
box.x = 'box'
//设置执行函数的对象属性
function outFunc() {
  this.x = 'outFunc';
  box.addEventListener('click', func, false);
}
outFunc();
function func() {
  console.log(this.x); //输出box 说明该this指向的是调用addEventListener的对象
}

代码2

function outFunc() {
  this.x = 'outFunc';//给全局对象window.x赋值（相当于赋值全局变量）
  box.addEventListener('click', func.bind(this), false);
}
function func() {
  console.log(this.x); //输出outFunc 使用bind设置this的值
}

总结：使用bind绑定的事件才是指向函数，否则指向的是调用addEventListener的对象。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue中使用this.$set()如何新增数据,更新视图

    Vue中使用this.$set()如何新增数据,更新视图

    目录 使用this.$set()新增数据,更新视图 描述 简单的讲就是 说说vue.set() (this.$set)用法 使用this.$set()新增数据,更新视图 描述 如果在实例创建之后添加新的属性到实例上,它不会触发视图更新 简单的讲就是 在页面渲染完成之后,对data里的某个数组或对象进行新增删除属性操作是监听不到的,视图不会更新 <div id='app'>     <el-button @click="setinfo">新增属性</el-b

  • 解决vue中数据更新视图不更新问题this.$set()方法

    目录 vue数据更新视图不更新 解决问题 vue数据不更新的原因(数据更改了,但是视图没有更新) 解决办法 具体流程如下 数组更新检测 注意事项 对象更改检测注意事项 vue数据更新视图不更新 1.data中有对象obj :{name:'远航',age:18} 2.此时新增phone this.obj.phone = '123456' 再次更新 用this.obj.phone = '654321' 视图未更新  用this.$set(this.obj,"phone", "65

  • vue中this.$http.post()跨域和请求参数丢失的解决

    目录 this.$http.post()跨域和请求参数丢失 this.http.post()参数需注意 this.$http.post()跨域和请求参数丢失 methods: { research: function () { //post请求远程资源 this.$http.post( //请求的url "http://www.hefeixyh.com/login.html", //请求参数,不能以get请求方式写:{params: {userName: "root123&q

  • vue中的addEventListener和removeEventListener用法说明

    vue中的addEventListener和removeEventListener用法说明

    目录 addEventListener和removeEventListener用法说明 1.添加监听事件(addEventListener) 2.移出监听事件(removeEventListener) 使用addEventListener添加事件.removeEventListener移除事件 添加事件 移除事件 addEventListener和removeEventListener用法说明 1.添加监听事件(addEventListener) 语法:element.addEventListe

  • Vue2 this 能够直接获取到 data 和 methods 的原理分析

    目录 前言 源码 initMethods bind函数 isReserved initData getData proxy 简略实现 总结 前言 在平时使用vue来开发项目的时候,对于下面这一段代码,我们可能每天都会见到: const vm = new Vue({ data: { name: '我是pino', }, methods: { print(){ console.log(this.name); } }, }); console.log(vm.name); // 我是pino vm.pr

  • Vuex中this.$store.commit()和this.$store.dispatch()区别说明

    目录 this.$store.commit()和this.$store.dispatch()的区别 commit: 同步操作 dispatch: 异步操作 其他了解 Vuex应用实例this.$store.commit()触发 新建文件夹store,store下 头部公共组件components文件夹下 this.$store.commit()和this.$store.dispatch()的区别 两个方法其实很相似,关键在于一个是同步,一个是异步 commit: 同步操作 this.$store

  • Vuejs使用addEventListener的事件如何触发执行函数的this

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

    目录 使用addEventListener事件触发执行函数的this 如下面的例子 addEventListener中事件函数的this指向问题 看代码 代码2 使用addEventListener事件触发执行函数的this 在普通的dom操作中,若是使用addEventListener 如下面的例子 <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta

  • 深入理解Node.js 事件循环和回调函数

    深入理解Node.js 事件循环和回调函数

    本文详细的介绍了Node.js 事件循环和Node.js回调函数,废话不多说了,具体看下面把.  一.Node.js 事件循环 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高.Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发.Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现.Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观

  • DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

    DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)

    俗话说的好,好记性不如个烂笔头,这么多技术文章如果不去吃透,技术点很快就容易忘掉,下面是小编平时浏览的技术文章,整理的笔记,分享给大家. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人的肩膀上会使得我们开发的效率大幅度提升.不过,我们也应该.必须了解其基本原理.比如DOM事件,jquery框架帮我们为我们封装和抽象了各浏览器的差异行为,为事件处理带来了极大的便利.不过浏览器逐步走向统一和标准化,我们可以更加安全地使用官方规范的接口.因为只有获得众多开发者的芳心,浏览器才会走得更远.正如我们

  • addEventListener和attachEvent二者绑定的执行函数中的this不相同

    写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前者是Firefox chrome,后者只是存在于IE系列中. 最近在写一个事件代理的时候,遇到一个BUG,发现除此外,二者绑定的执行函数中的 this 是不相同的,addEventListener 和 attachEvent函数在运行时候的上下文是不相同的. 用了一个简单的demo来描述这个不同点: 复制代码 代码如下: <html xmlns="http://www.w3.org/

  • 修复ie8&chrome下window的resize事件多次执行

    复制代码 代码如下: /** * window.onresize 事件 专用事件绑定器 v0.1 Alucelx * http://www.cnblogs.com/Alucelx/archive/2011/10/20/2219263.html * <description> * 用于解决 lte ie8 & chrome 及其他可能会出现的 原生 window.resize 事件多次执行的 BUG. * </description> * <methods> *

  • jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend(局部事件) 3.ajaxSend(全局事件) 4.success(局部事件) 5.ajaxSuccess(全局事件) 6.error(局部事件) 7.ajaxError (全局事件) 8.complete(局部事件) 9.ajaxComplete(全局事件) 10.ajaxStop(全局事件) 其中,全局事件可以在ajax相关方法外引用(比如,通过该方式将ajax执行各个阶段的信息显示在页面某个地

  • javascript阻止scroll事件多次执行的思路及实现

    写这个主要是为了解决一些常见网页特效在js解析时预期与效果不同. 原始代码 : 复制代码 代码如下: //测试代码 window.onscroll = function(){ alert("haha"); } 装在script标签内 鼠标滑动之后一直惦记 提示框才可以,所以很不方便 , 而且 目的是鼠标滑动后 只执行一次事件,这个效果显然和实际不符合吧. //代码改进--增加延时器. 既然scroll事件是一个连续触发事件,那我设置一个延迟器,在用户滑动鼠标的时间后执行该函数 ,书不是

  • Textbox控件注册回车事件及触发按钮提交事件具体实现

    引子: 在ASP.Net页面中textbox的index为1(或n),其后的提交按钮index为2(n+1),光标在textbox中,回车后自动焦点移动到后面的button上,会触发button的点击事件. 但在Lyncplus客户端中访问Web页面时遇到了TextBox控件回车自动完成按钮的提交事件失效的情况(应该是自动切换焦点). 由于并且该服务端TextBox控件没有提供OnKeyPress或OnKeyDown等事件,也无法针对回车事件写后台代码来调用Button按钮的点击事件. 于是上网

  • 解决vue elementUI 使用el-select 时 change事件的触发问题

    如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it

  • 详解Jenkins 实现Gitlab事件自动触发Jenkins构建及钉钉消息推送

    详解Jenkins 实现Gitlab事件自动触发Jenkins构建及钉钉消息推送

    实践环境 GitLab Community Edition 12.6.4 Jenkins 2.284 Post build task 1.9(Jenkins插件) Generic Webhook Trigger Plugin 1.72(Jenkins插件) GitLab 1.5.13(Jenkins插件) 实现步骤 钉钉机器人配置 选择要推送的钉钉群 -> 点击群设置按钮 -> 点击智能群助手 -> 点击添加机器人 -> 点击添加机器人+号按钮 -> 点击自定义->填写

随机推荐