js addeventlistener能使用哪些事件,vue window.addEventListener
本文主要介绍Vuejs利用addEventListener的事件触发执行函数的这种方法，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
使用addEventListener事件触发此执行功能。如下例所示，addEventListener中的这个事件函数指出了问题所在。参见代码2。
使用addEventListener事件触发执行函数的this
在普通的dom操作中，如果使用addEventListener
如下面的例子
！index.html
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题标题/标题
/头
身体
div id=btn_container
button id=btn 单击我/button
/div
script src=test.js/script
/body
/html
设fn=function() {
console . log(this)；
};
document.getElementById(btn )。addEventListener(click ，fn)；
然后，控制台中该输出的值就是触发该事件的dom节点。
(另：有用链接=门户)
如果使用vuejs中的自定义指令来触发click事件，那么trigger函数中的这个是什么？
/**
*这是vuejs的一个模块。
*/
模板
div class=容器
div class=row
div class= col-xs-12 col-sm-8 col-sm-offset-2 col-MD-6 col-MD-offset-3
按钮class= BTN BTN-primary v-myOn:click= fn click me/button
/div
/div
/div
/模板
脚本
导出默认值{
指令：{
我的儿子：{
bind(el，binding，vnode) {
const event=binding.arg
const fn=binding.value
console . log(El)；
el.addEventListener(事件，fn)；
}
}
},
方法：{
fn() {
console . log(this)；
}
}
}
/脚本
经过测试，这里控制台输出的值是：
这是一个虚拟dom的值，其中$el的值是div.container，它是这个模块最外面的dom节点。但是，此事件绑定到一个按钮，控制台中bind输出的第一个el的值是
然后，再次测试后，将另一个div class=outer-container 添加到这个div class=container 的外层
测试结果如下：
$el 的值依然为最外层的dom节点
结论：如果在Vuejs中使用了自定义指令绑定事件，那么在事件被触发后的执行函数中，this指向该模块最外层的dom节点。
addEventListener中事件函数的this指向问题
看代码
//为绑定单击事件定义一个可见框
var box=document . getelementbyid( box )；
box.x=box
//设置执行函数的对象属性
函数outFunc() {
this.x= outFunc
box.addEventListener(click ，func，false)；
}
out func()；
函数func() {
console . log(this . x)；//输出框显示这是指向调用addEventListener的对象。
}
代码2
函数outFunc() {
this.x= outFunc//给全局对象window.x赋值(相当于给全局变量赋值)
box.addEventListener(click ，func.bind(this)，false)；
}
函数func() {
console . log(this . x)；//output out unc使用bind来设置此
}
总结：用bind绑定的事件是指向函数，否则指向调用addEventListener的对象。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。