Vuejs使用addEventListener的事件如何触发执行函数的this
作者:schwarzeni 时间:2024-04-10 13:49:45
使用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
标签:Vue,addEventListener,触发,this
0
投稿
猜你喜欢
Python flask sqlalchemy的简单使用及常用操作
2021-09-22 22:11:18
opencv实现车牌识别
2023-08-10 01:59:38
asp函数转换xml中的实体字符[转义符]
2008-10-16 17:07:00
IE Cookie文件格式说明
2023-03-13 17:17:22
Python内置函数dir详解
2023-05-29 13:38:10
Python-split()函数实例用法讲解
2023-12-12 07:13:20
Python api构建tensorrt加速模型的步骤详解
2022-03-01 17:21:19
MySQL修改默认字符集编码的方法
2024-01-26 01:18:52
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2023-07-09 01:15:42
对python中数组的del,remove,pop区别详解
2021-01-23 09:22:31
Go语言基础模板设计模式示例详解
2024-02-01 16:29:32
Pytorch自己加载单通道图片用作数据集训练的实例
2022-02-06 22:56:03
Python中fnmatch模块的使用详情
2021-06-14 20:50:18
Google Chrome CSS选择器速度测试比较
2008-10-06 13:24:00
如何把Oracle 数据库从 RAC 集群迁移到单机环境
2024-01-28 06:29:05
Mysql数据迁徙方法工具解析
2024-01-23 18:23:30
MySQL中where 1=1方法的使用及改进
2024-01-17 22:00:59
PyQt5 matplotlib画图不刷新的解决方案
2021-06-14 14:43:39
python批量读取文件名并写入txt文件中
2021-02-18 16:32:29
PyTorch线性回归和逻辑回归实战示例
2021-09-12 17:50:57