- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
废话不多说(主要文笔比较差),直接上代码 。
一个简单的demo,如下 。
<img :src="orginalImgSrc" style="display: none;" crossOrigin="Anonymous" @load="imgLoaded">
vue代码 。
imgLoaded(e) { debugger console.log('event',e); console.log('target',e.target); return; }
这时候,会发现 。
console.log里的event对象,target始终为null,但是如果debugger进去看,又是可以看到taget对象的 。
。
下图为debugger模式下
。
下面为控制台 。
可以清晰的看到,控制台的输出里,target对象始终为null,由于我一开始只输出了event对象,看到target对象为null后百思不得其解,认定从这里取target对象,必然也是null 。
实际上此处是可以直接获取到target对象的. 。
那么为什么呢?
参考相关资料后得知 。
这个问题是事件循环机制导致的,在JavaScript中,事件处理程序是在事件循环任务队列中异步执行的. 。
但@load事件触发的时候,event事件对象会被正确传递给事件处理程序,demo中为imgLoaded(e),在控制台输出之前,JavaScript引擎已经执行了后续的代码. 。
但是在这个过程中,某些浏览器优化或者垃圾回收机制导致e.target引用被移除或者清除了,导致第一次打印e.target的时候,显示为null 。
第二次打印的时候.e.target是一条新的一句,JavaScript的引擎会重新计算e.target的值,所以又获取到了正确的元素引用. 。
因此通常建议在程序开头,将e.target存储到一个局部变量中.然后再后续的代码中使用该变量,防止JavaScript的引擎执行机制丢失对目标元素的引用 。
。
。
再举个例子,会被优化掉target的例子 。
const tempImg = new Image();
输出结果如图 。
是不是有点奇怪,上面明明说.e.target应该会重新计算的,为什么在settimeout里,并没有重新计算呢?
当 onload 事件触发时,ev 参数就是一个指向事件对象的引用。但是,一旦事件处理程序执行完毕,这个引用就会被清除,以节省内存。 在你的代码中,setTimeout 函数会在当前执行上下文结束后,将其回调函数加入事件循环队列。当事件循环再次运行时,它会从事件队列中取出回调函数并执行。 问题在于,当 setTimeout 的回调函数执行时,原始的事件对象 ev 已经不存在了,因此 ev.target 自然就变成了 null。 这个问题在基于 Blink 内核的浏览器中尤其常见,如 Chrome、Edge 等。它们会在事件处理程序执行完毕后,主动清除对事件对象的引用,以优化内存使用.
但是,如果我在setTimeOut里输出ev也就是event对象呢?event对象依然有,只不过target还是null,为什么呢?
这是因为事件对象的生命周期与目标元素的引用生命周期不同。 在 Web 浏览器中,事件对象 ev 本身是一个对象,它包含了许多属性,如 type、currentTarget 等,用于描述事件的细节。但其中的 target 属性指向触发该事件的 DOM 元素。 当事件处理程序执行完毕后,浏览器会清除对目标元素 (ev.target) 的引用,以释放内存。但事件对象 ev 本身并不会被立即销毁,它可能还会在其他地方被使用或引用。 所以在代码中,当 setTimeout 回调函数执行时,虽然 ev.target 已经变成了 null,但 ev 对象本身仍然存在,只是它的 target 属性已经被清除了。这就解释了为什么 console.log('settimeout---ev:', ev) 能够打印出事件对象,但 ev.target 却是 null。 这种行为是浏览器的优化机制,它只清除了对目标元素的引用,而保留了事件对象本身,以防止意外地破坏了其他依赖于该事件对象的代码。 总的来说,在异步操作中访问事件对象的属性时,最安全的做法是将需要使用的属性值提前存储到其他变量中,而不是直接引用事件对象的属性,因为这些属性的生命周期可能会比事件对象本身更短.
所以如果用局部变量接收,就可以正确输出,代码如下 。
const tempImg = new Image(); tempImg.setAttribute('crossOrigin', 'Anonymous'); tempImg.src = this.imgResize; console.log('*****************'); tempImg.onload = (ev) => { console.log('onload', ev); console.log('ev.target',ev.target); const t_target=ev.target; setTimeout(() => { console.log('settimeout---target:',t_target) // <- HTMLElement }, 0)
。
。
。
参考相关资料
1 https://github.com/vuejs/vue/issues/7027 。
2 https://claude.ai/ 。
。
最后此篇关于关于vue中image控件,onload事件里,event.target为null的奇怪问题探讨的文章就讲到这里了,如果你想了解更多关于关于vue中image控件,onload事件里,event.target为null的奇怪问题探讨的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
所以我想隐藏一个div,所以我有我的代码 function hide(){hide div code} document.onload = hide(); 不起作用。 window.onload =
我有一个外部 js 文件,它有一个函数,该函数旨在在文档正文加载后运行。这是我到目前为止所拥有的,但它并没有像它应该的那样工作。请一些帮助。 外部JS文件 window.document.body.a
我觉得这很有趣。考虑以下代码, window.onload 和 body onload=""调用相同的函数。但是,结果不同。在我看来,window.onload 的集合有问题。这是代码:
我多次在链接上使用 Shadowbox,我知道 href 指示 Shadowbox 像这样在框中加载什么页面: 但是,我现在需要在用户进入页面时立即显示一个阴影框。不是onclick,而是onloa
我正在制作一个页眉和页脚不变的网站。单击站点时,主 div 会更改。这是代码: Item 1 ... $("#item").click(function(){$("#main").load("i
我在网页中有 2 个函数 (js) 用于将图像附加到 Canvas 元素: function attachImage(tile, x, y) { base_image = new
首先向大家问好。我是 jquery 的新手,并且在学习曲线上。 我的脚本是这样的: $(function () { $('#content').find('#nav a').on('click'
我今天遇到了一个奇怪的错误。我有一个简单的用户脚本,它添加了一个 window.onload事件到所有网站。但是其中一个网站有一个 定义。发生的事情是 window.onload像往常一样工作但是安装
今天我遇到了一个奇怪的问题: window.onload 在引用名为 onload 的函数时似乎不会触发。 我以前从未注意到这一点: 测试 1: window.onload=onload; funct
假设你想用 JS 把一个元素变成蓝色,像这样: Boy, I sure do wish I was blue 上面的行不起作用,因为 this 以该上下文中的 window 对象为目标。您可以使用 I
我的问题与此处提出的问题类似,但又略有不同,window.onload vs 那道题是用 window.onload 和内联 js 的对比。 我的问题是下面的区别。假设正文标签的 ID 为“body
window.onload事件和body标签的onload事件到底有什么区别?我什么时候使用哪个以及如何正确使用? 最佳答案 window.onload = myOnloadFunc和 是使用同一事件
哪个得到更广泛的支持:window.onload 或 document.onload? 最佳答案 他们什么时候开火? window.onload 默认情况下,它会在整个页面加载时触发,包括其内容(图像
之间有什么区别: window.onload = someFunction; window.onload = someFunction(); 括号在最后。它们有什么不同吗? 我们一般使用第一个!如果我
在 this question 的答案中,我们读到 function f() {}在本地定义名称,而 [var] f = function() {}全局定义它。这对我来说很有意义,但是这两个声明之间存
当我将索引值传递给 onLoad() 时,因此当它开始在后台运行时,它将使用索引值来索引数组。问题是,从表面上看,当 onLoad() 开始运行时,它引用的索引值始终是最后一个索引。 我尝试将每个请求
假设我有这个页面: Hello, world! test.html 包含以下内容: huge.png由于某种原因是100mb。 我无法控制 test.html,但我必须在我的页面中包含 ifram
我正在做以下工作。如果启用了 js,它基本上会通过 ?answer=1。在我添加 onload 参数之前它一直有效(因为我希望这在没有用户触发的情况下发生)。但是,添加 onload 似乎会停止(否则
我可以同时使用body onload和window.onload吗?我已经使用此代码尝试过 window.onload = alertSec; 但是没有成功。我只是需要有人向我确认一下
我可以同时使用body onload和window.onload吗?我已经使用此代码尝试过 window.onload = alertSec; 但是没有成功。我只是需要有人向我确认一下
我是一名优秀的程序员,十分优秀!