Vuejs中使用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节点
更多推荐
已为社区贡献1条内容
所有评论(0)