addEventListener 内 this 指向问题

相关问题前提:
最近在做一个 已知 audio 的 url 获取 其 时长,并且push 进去数组的问题

上代码:

            if (fileType === 'audio') {
              let audioDom = new Audio(url)
              let _this = this
              audioDom.addEventListener('loadedmetadata', function (_event) {
                embeddedData.audio = {
                  id: fileUrl,
                  Extension: fileType.toUpperCase(),
                  fileExtension: fileType.toUpperCase(),
                  // 获取音频的长度
                  duration: Math.round(audioDom.duration)
                }
                fileInfo.audioTime = Math.round(audioDom.duration)
                _this.embeddedFiles.push(embeddedData)
                _this.$emit('uploadSuccess', fileInfo)
              })
            } else {
              fileType === 'image' ? this.embeddedImages.push(embeddedData) : this.embeddedFiles.push(embeddedData)
              this.$emit('uploadSuccess', fileInfo)
            }

记录一下:
1、首先要常见一个 audio dom
2、然后 用 addEventListener('loadedmetadata', function(){}),这个事件是说 等 这个audio 都加载完成了以后 ,就可以获取到 audio的 相关 参数,比如说 duration值
3、这一点需要注意:在 这个事件里面,数据是拿不出来的,所以 ,我就用 原本的一个全局的 数据push 进去了,但是用的是 this.embeddedFiles.push(embeddedData),但是 报错表示 this.embeddedFiles 不存在,是由于作用域的问题,所以要 先 let _this = this,再用 _this.embeddedFiles.push(embeddedData) 就可以了

ok ,仅此记录

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 22、JQ的基础语法、核心原理和项目实战 jQ的版本和下载 jQuery版本 1.x:兼容IE6-8,是目前PC端...
    萌妹撒阅读 5,697评论 0 0
  • dom事件 1.什么是事件?事件就是一件事情或者行为(对于元素来说他的很多事件都是天生自带)只要我们去操作这个元素...
    田成力阅读 3,863评论 0 0
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,867评论 1 11
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 10,640评论 0 21
  • 教程一:视频截图(Tutorial 01: Making Screencaps) 首先我们需要了解视频文件的一些基...
    90后的思维阅读 10,265评论 0 3