1、使用浏览器监听切屏为例

此处为考虑浏览器兼容性推荐使用:document.addEventListener

1.1、正常函数使用如下:

let n = 0;
let max = 3; // 切屏最大次数
document.addEventListener("visibilitychange", function () {
if(document.visibilityState == 'hidden'){
n++;
} else if(document.visibilityState == 'visible') {
if (n > max) {
this.$alert('你已经切换离开考试页面超过'+max+"次系统将自动提交答卷!", '警告', {
confirmButtonText: '知道了',
callback: action => {
this.msgSuccess("系统自动提交答卷!");
}
});
return;
}
this.$alert('你已经切换离开考试页面'+n+'次,如果超过'+max+"次系统会自动提交答卷,请认真作答!", '警告', {
confirmButtonText: '知道了',
callback: action => {}
});
}
});

this.$alert()为vue的MessageBox弹框组件

运行后报:提示this.$alert()不是一个函数

此时我们尝试在document函数里面打印this到控制台看看

console.log("this===",this);

控制台输出信息:指向的是调用addEventListener的对象

我们使用document对象去调用VueJS的组件函数肯定是行不通的,那么怎样可以拿到VueJS的this呢?我们只需稍作修改

1.2、bind()绑定事件指定函数

修改后的代码如下:

let n = 0;
let max = 3; // 切屏最大次数
let fn = function () {
console.log("this===",this);
if(document.visibilityState == 'hidden'){
n++;
} else if(document.visibilityState == 'visible') {
if (n > max) {
this.$alert('你已经切换离开考试页面超过'+max+"次系统将自动提交答卷!", '警告', {
confirmButtonText: '知道了',
callback: action => {
this.msgSuccess("系统自动提交答卷!");
}
});
return;
}
this.$alert('你已经切换离开考试页面'+n+'次,如果超过'+max+"次系统会自动提交答卷,请认真作答!", '警告', {
confirmButtonText: '知道了',
callback: action => {}
});
}
}
// 使用bind绑定的事件才是指向函数,否则指向的是调用addEventListener的对象
document.addEventListener("visibilitychange", fn.bind(this));

详解:

  1. 将触发事件后执行的函数抽到外部,作为外部函数并赋予函数名
  2. 在事件中使用函数名.bind('指定函数');即可在执行的函数中获取到bind绑定的指定函数

控制台查看此时的this为

效果图:

参考博文:https://www.jb51.net/article/253509.htm

VueJS使用addEventListener的事件如何触发执行函数的this的更多相关文章

  1. js autocomplete输入延迟触发执行事件

    需求:延迟查询,autocomplete延迟触发执行事件.当有下一个事件开始时,本次事件中断.目的是为了防止调用服务器过于频繁. var timeout = 0;//延时处理 $("#cus ...

  2. JS事件 卸载事件 当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。注意:不同浏览器对onunload事件支持不同。

    卸载事件(onunload) 当用户退出页面时(页面关闭.页面刷新等),触发onUnload事件,同时执行被调用的程序. 注意:不同浏览器对onunload事件支持不同. 如下代码,当退出页面时,弹出 ...

  3. JS事件 文本框内容改变事件(onchange)通过改变文本框的内容来触发onchange事件,同时执行被调用的程序。

    文本框内容改变事件(onchange) 通过改变文本框的内容来触发onchange事件,同时执行被调用的程序. 如下代码,当用户将文本框内的文字改变后,弹出对话框"您改变了文本内容!&quo ...

  4. JS事件 失焦事件(onblur)onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序。

    失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标 ...

  5. JS事件 鼠标经过事件(onmouseover)鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序。

    鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定&quo ...

  6. 细说addEventListener与事件捕获

    细说addEventListener与事件捕获.事件冒泡(一)addEventListener的基本用法 在复杂的项目开发中,javascript和html的解耦变得至关重要,我们被推荐使用事件动态绑 ...

  7. javascript避免dom事件重复触发

    /** * 为指定控件添加限制性事件, 该事件在触发之后, 会被移除, 并在指定的时间间隔后, 重新绑定, 适用于避免控件事件被误操作重复触发的场景 * @param {String} domID 要 ...

  8. DOM事件阶段以及事件捕获与事件冒泡先后执行顺序

    平时浏览这么多技术文章,如过不去实践.深入弄透它,这个技术点很快就会在脑海里模糊.要加深印象,就得好好过一遍.重要的事情说三遍,重要的知识写一遍. 开发过程中我们都希望使用别人成熟的框架,因为站在巨人 ...

  9. 自定义事件的触发dispatchEvent

    1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: documen ...

  10. (转)js原生自定义事件的触发dispatchEvent

    1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化.因此,总结说来就是: 1 2 3 d ...

随机推荐

  1. 微软出品的UI自动化测试工具Playwright(三)

    微软出品的UI自动化测试工具Playwright(三) 网址 说明 https://playwright.dev/ 官网首页 https://playwright.dev/python/docs/in ...

  2. 笔记:C++学习之旅---引用

    笔记:C++学习之旅---引用 什么是引用? 引用就是别名,引用并非对象,相反的,他只是为一个已经存在的对象所起的另外一个名字. /*引用就是别名*/ #include <iostream> ...

  3. react项目使用less样式,配置less

    create-react-app脚手架创建的项目有sass配置项,使用的时候只需要装包即可,下面是less使用的方法 由于 create-react-app 脚手架中并没有配置关于 less 文件的解 ...

  4. 《HelloGitHub》第 85 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

  5. 你知道Object类和Objects的常用方法吗

    文章目录 Object的常用方法 Objects的常用方法 hashCode hash isNull equals requireNonNull compare nonNull 大家好,Leo又来了! ...

  6. P1980 [NOIP2013 普及组] 计数问题

    题目链接:https://www.luogu.com.cn/problem/P1980 术语 以下的英文术语均可以翻译为数字. digit: 一个数字字符,十进制就是 0-9 之间的一个字符: num ...

  7. Prism Sample 1

    这个样例版本上已经过时了,但与8.1版本仍然兼容. 在本版本中,指定启动项: App.xaml.cs: protected override void OnStartup(StartupEventAr ...

  8. 基于APM模式的异步实现及跨线程操作窗体或控件方法的实现示例

    最近在一家某电力外派公司开发相关于GIS的功能,在实现代码的过程中出现了一些常见的问题比如: 1.跨线程执行窗体或控件操作(直接使用委拖) 2.异步模式执行某长时间耗时方法 经过一系列摸索可算找到解决 ...

  9. 2022-12-11:行程和用户。以下为输出结果,请问sql语句如何写? +------------+-------------------+ | Day | Cancellation

    2022-12-11:行程和用户.以下为输出结果,请问sql语句如何写? ±-----------±------------------+ | Day | Cancellation Rate | ±- ...

  10. 2021-01-07:cdn加速是什么原理?

    福哥答案2021-01-07:[答案来自此链接:](https://www.zhihu.com/question/438234873)CDN(Content Delivery Network):内容分 ...