Vuejs使用addEventListener的事件如何触发执行函数的this
作者:schwarzeni 发布时间:2024-04-10 13:49:45
标签:Vue,addEventListener,触发,this
使用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的对象。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
来源:https://blog.csdn.net/nzyalj/article/details/70568455


猜你喜欢
- 首先,我的索引结构是酱紫的。
- 一、前言程序的性能也是非常关键的指标,很多时候你的代码跑的快,更能够体现你的技术。最近发现很多小伙伴在性能分析的过程中都是手动打印运行时间的
- 通过文件夹导入包要求每个目录下都有一个__init__.py文件,此文件可空白。也可不空。a@ubuntu:~/Desktop$ tree
- 导语记得很久以前写过一些中国大学MOOC上的视频下载器,不过好像都已经年久失修了。正好最近有需要,所以重新写了一个,顺便上来分享一波,寒假大
- 首先贴出四种方法适用范围比较:注释:Excel 2003 即XLS文件有大小限制即65536行256列,所以不支持大文件。而Excel 20
- 前言SQLite是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。它是一个零配置的数据库,这意味着与其
- 这篇文章主要介绍了jekins配置python脚本定时任务过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价
- 采用numpy快速将两个矩阵或数组合并成一个数组:import numpy as np数组a = [[1,2,3],[4,5,6]]b =
- MySQL GUI工具很多,本文就常用的Navicat for MySQL与MySQL-Front的特色功能做一个详细介绍与比较。(一)My
- MAH一:MAH架构介绍MHA (Master High Availability)目前在MySQL高可用方面是一个相对成熟的解决方案,它由
- 本篇阅读的代码片段来自于30-seconds-of-python。1. count_bydef count_by(arr, fn=lambd
- 一、安装第三方模块首先要下载名为"pymssql"的模块,然后import该模块安装方法 :1.第一种方法:按win+r
- 本文实例讲述了ThinkPHP框架实现用户信息查询更新及删除功能。分享给大家供大家参考,具体如下:一 代码1、配置文件<?phpret
- 说明和代码如下:<%@ language = vbscript%><% 
- 本文研究的主要是pandas常用函数,具体介绍如下。1 import语句import pandas as pdimport numpy as
- 常见的 Python 文件后缀有:py、pyc 、pyo、 pyi、pyw、 pyd、 pyx 等。本文只介绍相对常见的一些后缀名,至于一些
- 实现一个支持动态扩容的数组并完成其增删改查#通过python实现动态数组"""数组特点: 占用一段
- 本文实例讲述了golang操作mongodb的方法。分享给大家供大家参考。具体实现方法如下:package mainimport (&nbs
- 1. yum list installed | grep php 查看安装的php版本mod_php72w.x86_64 7.2.1-1.w
- 在my.cnf中设置了sql_mode='STRICT_TRANS_TABLES';却发现还是有非法数据的写入,比如无符号整