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
0
投稿
猜你喜欢
- #!/usr/bin/env python# -*- coding: utf-8 -*-# @File : 自实现一个线性回归.py# @A
- 1、类有两个方法,一个是 new,一个是 init,有什么区别,哪个会先执行呢?class test(object): &nb
- 对python中的控制条件、循环和跳出详解代码缩进(代码块):python用缩进表示代码块,没有其他语言的大括号缩进是强制检查,整个代码缩进
- 本文实例为大家分享了python创建单词词库的具体代码,供大家参考,具体内容如下基本思路:以COCA两万单词表为基础,用python爬取金山
- 前言本文的文字及图片来源于网络,仅供学习、交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理。from math
- [sql] -- ===================【创建存储过程】===================== USE [Message
- zipfile模块是python中一个处理压缩文件的模块,解决了不少我们平常需要处理压缩文件的需求。大家还知道Python zipfile
- 通常,由于类别不均衡,需要使用weighted cross entropy loss平衡。def inverse_freq(label):
- 前面的深入理解Routing章节,我们讲到了在MVC中,除了使用默认的ASP.NET 5的路由注册方式,还可以使用基于Attribute的特
- 最近利用tkinter+python+pyinstaller实现了小工具的项目,在此记录下pyinstaller相关参数以及爬过的坑。一、p
- 在Python中,有许多用于发送HTTP请求的库,其中最受欢迎的是requests、aiohttp和httpx。这三个库的性能和功能各不相同
- 一、本文需求背景周六日出现CDN大量请求,现需要分析其请求频次与来源,查询是否存在被攻击问题。本文以阿里云CDN日志作为辅助查询数据,其它云
- 本文实例讲述了python使用socket向客户端发送数据的方法。分享给大家供大家参考。具体如下:import socket, syspor
- 题目:求一个3*3矩阵对角线元素之和。程序分析:利用双重for循环控制输入二维数组,再将a[i][i]累加后输出。 def two_dime
- 1 、据说python3就没有这个问题了2 、u'字符串' 代表是unicode格式的数据,路径最好写成这个格式,别直接跟字
- 文章背景每隔几年,开放式Web应用程序安全项目就会对最关键的Web应用程序安全风险进行排名。自第一次报告以来,注入风险高居其位!在所有注入类
- 本文实例讲述了python数组过滤实现方法。分享给大家供大家参考。具体如下:这段代码可以按照指定的条件过滤数组内的元素,返回过滤后的数组li
- matplotlib是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图。而且也
- 1、找到python的安装目录在python (版本号)\lib\idlelib目录下添加Clearwindow.py文件源代码如下:cla
- 什么是mtcnn和facenet1、mtcnnMTCNN,英文全称是Multi-task convolutional neural netw