首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

fromEvent不会在我放入HTMLElement时触发,而会在我放入Jquery对象时触发

fromEvent 是 RxJS 库中的一个函数,用于从 DOM 事件或其他事件源创建一个 Observable。如果你发现 fromEvent 在直接使用 HTMLElement 时不触发,而在使用 jQuery 对象时触发,这通常与事件监听器的绑定方式有关。

基础概念

Observable: 在 RxJS 中,Observable 是一个可以发出多个值的对象,类似于数组,但发出值的方式是异步的。

fromEvent: 这是一个 RxJS 操作符,用于将事件源(如 DOM 元素)转换为 Observable,从而可以使用 RxJS 的强大功能来处理事件流。

可能的原因

  1. 事件监听器的绑定时机:如果你在 HTMLElement 还未完全插入到 DOM 中时就绑定了事件监听器,那么事件可能不会被正确捕获。
  2. jQuery 的内部实现:jQuery 可能在内部做了额外的处理,确保事件监听器能够正确绑定,即使元素尚未完全插入 DOM。

解决方案

确保在 HTMLElement 完全插入到 DOM 后再绑定事件监听器。你可以使用 setTimeout 或者 requestAnimationFrame 来延迟绑定,或者使用 MutationObserver 来监听 DOM 变化。

示例代码

代码语言:txt
复制
import { fromEvent } from 'rxjs';

// 假设你有一个 HTMLElement 变量叫做 myElement
const myElement = document.getElementById('myElementId');

// 使用 setTimeout 确保元素已经插入到 DOM 中
setTimeout(() => {
  const click$ = fromEvent(myElement, 'click');
  click$.subscribe(event => {
    console.log('Element clicked!', event);
  });
}, 0);

// 或者使用 requestAnimationFrame
requestAnimationFrame(() => {
  const click$ = fromEvent(myElement, 'click');
  click$.subscribe(event => {
    console.log('Element clicked!', event);
  });
});

// 如果你需要更精确的控制,可以使用 MutationObserver
const observer = new MutationObserver((mutationsList, observer) => {
  for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
      const click$ = fromEvent(myElement, 'click');
      click$.subscribe(event => {
        console.log('Element clicked!', event);
      });
      observer.disconnect(); // 停止观察,因为我们已经绑定了事件
      break;
    }
  }
});

observer.observe(document.body, { childList: true, subtree: true });

应用场景

fromEvent 在需要处理连续的用户交互或异步事件流时非常有用,例如:

  • 处理表单输入
  • 监听滚动事件
  • 实现自定义的拖放功能
  • 处理键盘快捷键

通过使用 RxJS 的操作符,你可以轻松地对这些事件流进行过滤、映射、合并等操作,从而实现更复杂和强大的功能。

优势

  • 异步处理:RxJS 提供了丰富的操作符来处理异步数据流。
  • 可组合性:你可以将多个 Observable 组合在一起,创建更复杂的逻辑。
  • 错误处理:RxJS 提供了强大的错误处理机制,可以更容易地管理异常情况。

通过上述方法,你应该能够解决 fromEvent 在使用 HTMLElement 时不触发的问题。

相关搜索:jQuery按钮不会在单击时触发为shopify触发onclick,而不会在页面加载时发生Reactjs-onClick事件不会在我第一次单击按钮时触发Socket.io不会在我的React应用程序中触发浏览器后退按钮时触发断开连接React认为我的"AbstractContract“是一个”对象“,不会在我调用方法时呈现为什么我的.on("mouseover")事件在页面刷新时触发,而不是在“mouseover”事件上触发在使用jQuery时,我的`$.when`块中的代码无法触发在单击鼠标时立即触发事件,而不是在我松开鼠标之后?我希望将图像放入对象或数组中,并在需要时使用它们。我该怎么办?如何在更换第二个sliderInput时重置一个one而不会在Shiny中触发反应加载时的jQuery窗口触发得太早。我还能用到什么?Wordpress中的Javascript当dom被触发时,我如何构建一个`event`对象的事件处理函数?jQuery : button_click事件不会在第一次单击时触发,而在第二次单击时工作,为什么?如何修复它?我想在第一次渲染时设置一次状态,而不会在后续更新时导致不必要的重新渲染为什么我的css动画只有在第一次触发时才会播放?而不是在后续的触发器上再次发生?当我尝试传递另一个道具时,为什么typescript会在我的使用rest道具的HOC中触发错误?SQL Server :我正在尝试创建一个触发器,当在表保留中插入数据时,它只更新特定行,而不是所有行我需要一个像withLatestFrom这样的运算符,除非它在两个可观察对象都发出一个值时立即触发C#我有两个共享脚本的游戏对象,但当触发器被激活时,脚本的一部分只为一个对象播放。
相关搜索:
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端入门6-JavaScript客户端api&jQuery

a; boolean a; 而 JavaScript 中,统一用 var 定义一个变量: var a; 变量的数据类型 虽然声明变量时,不必指出变量的类型,但也要清楚下,JS 中的基本数据类型 : ?...ctrlKey 事件触发时是否有点击ctrl键 键盘焦点事件 blur 在元素失去焦点时触发 focus 在元素获得焦点时触发 focusin 在元素即将获得焦点时触发 focusout 在元素即将失去焦点时触发...键盘点击事件 keydown 在用户按下某个键时触发 keypress 在用户按下并释放某个键时触发 keyup 在用户释放某个键时触发 键盘点击事件传入的是 KeyboardEvent 对象。...jQuery 为什么使用 jQuery 类似于 JVM 隐藏了不同操作系统之间的差异,让开发能够更专注于功能的实现,而不必花费过多时间适配不同操作系统。...html 创建元素 //类似于js中: document.createElement("标签名") var node1 = $("我是一个span元素");//返回的是jQuery

6.1K40

4-Jquery学习四-事件操作

2-triggerHandler()触发事件只针对jQuery对象中的第一个匹配元素。 3-triggerHandler()触发的事件不会在DOM树中冒泡,因此事件不会冒泡传递到它的任何祖辈元素。...4-triggerHandler()的返回值是对应事件处理函数的返回值,而不是当前jQuery对象本身。...): focusin是支持冒泡的,当我们把鼠标光标放入文本框时,该事件冒泡传递到父元素p上,因此可以在p元素上触发focusin事件。...它与mouseover事件相似,但mouseenter事件只会在鼠标进入当前元素时触发,而mouseover事件会在鼠标进入当前元素及其任何后代元素时触发(换句话说,mouseover事件支持冒泡)。...它与mouseleave事件相似,但mouseleave事件只会在鼠标离开当前元素时触发,而mouseout事件会在鼠标离开当前元素及其任何后代元素时触发(换句话说,mouseout事件支持冒泡)。

4.5K90
  • 也谈 setTimeout

    当然,初见这种用法时,我是一愣啊,什么情况,setTimeout( func, 0 ) 和直接调用 func 难道不是同一个效果?...那么,为什么放入 setTimeout( func, 0 ) 中就可以呢? 其实答案已经出来了, setTimeout 会等到重绘完成才执行代码,自然无往而不利。...jQuery 作者 John Resig 的这篇《How JavaScript Timers Work》通俗易懂地阐述了这个问题…… 以下是我对这篇文章的理解: ---- 理解 javasript 定时器的内部机制是必要的...继续看,当 timer 执行完, 第一个 interval 执行,在这个过程中,第三个 interval 触发.在其自身执行过程中,自身也可以被触发。...setTimeout 总是会在其回调函数执行后延迟 10ms (或者更多,但不可能少),而 setInterval 总是 10ms 执行一次,而不管 它的回调函数执行多久。

    1.3K10

    也谈 setTimeout

    当然,初见这种用法时,我是一愣啊,什么情况,setTimeout( func, 0 ) 和直接调用 func 难道不是同一个效果?...那么,为什么放入 setTimeout( func, 0 ) 中就可以呢? 其实答案已经出来了, setTimeout 会等到重绘完成才执行代码,自然无往而不利。...jQuery 作者 John Resig 的这篇《How JavaScript Timers Work》通俗易懂地阐述了这个问题…… 以下是我对这篇文章的理解: 理解 javasript 定时器的内部机制是必要的...继续看,当 timer 执行完, 第一个 interval 执行,在这个过程中,第三个 interval 触发.在其自身执行过程中,自身也可以被触发。...setTimeout 总是会在其回调函数执行后延迟 10ms (或者更多,但不可能少),而 setInterval 总是 10ms 执行一次,而不管 它的回调函数执行多久。

    1.5K100

    JVM的新生代、老年代、MinorGC、MajorGC

    一:新生代:主要是用来存放新生的对象。一般占据堆的1/3空间。由于频繁创建对象,所以新生代会频繁触发MinorGC进行垃圾回收。...);然后,清空Eden和ServicorFrom中的对象;最后,ServicorTo和ServicorFrom互换,原ServicorTo成为下一次GC时的ServicorFrom区。...在进行MajorGC前一般都先进行了一次MinorGC,使得有新生代的对象晋身入老年代,导致空间不够用时才触发。...当无法找到足够大的连续空间分配给新创建的较大对象时也会提前触发一次MajorGC进行垃圾回收腾出空间。...三:永久代 指内存的永久保存区域,主要存放Class和Meta(元数据)的信息,Class在被加载的时候被放入永久区域. 它和和存放实例的区域不同,GC不会在主程序运行期对永久区域进行清理。

    66820

    Go高阶15,垃圾回收、三色标记原理,终于能跟面试官扯皮了!

    分代收集::按照对象生命周期长短划分不同的代空间,生命周期长的放入老年代,短的放入新生代,不同代有不同的回收算法和回收频率。...这里的三色,对应了垃圾回收过程中对象的三种状态: 灰色:对象还在标记队列中等待 黑色:对象已被标记,该对象不会在本次GC中被清理 白色:对象未被标记,该对象将会在本次GC中被清理 初始状态下所有对象都是白色的...垃圾回收优化 写屏障(Write Barrier) STW 目的是防止 GC 扫描时内存变化而停掉 goroutine,而写屏障就是让 goroutine 与GC同时运行的手段。...GC 过程中新分配的内存会被立即标记,用的并不是写屏障技术,也即GC过程中分配的内存不会在本轮GC中回收。...垃圾回收触发时机 每次内存分配时都会检查当前内存分配量是否已达到阀值,如果达到阀值则立即启动 GC。内存增长率由环境变量 GOGC 控制,默认为100,即每当内存扩大一倍时启动GC。

    1.5K31

    jQuery笔记(3)

    ,不是jQuery对象 所以想要使用jQuery方法,需要将这个DOM元素转换成jQuery对象 $(domEle) 语法2: $.each(object, function(index,...: 本文由“壹伴编辑器”提供技术支持 创建元素 语法: $("") 动态的创建了一个 但是只是创建了元素是不会在结构中显示出来的,因为还没有说明要将元素放在哪里...(只能获取值不能修改) 我们这样得到的是一个对象,如果只想拿到其中的属性,比如我们可以offset().top,得到它的top属性 返回顶部案例: 和之前一样,做一个当页面滚动到内容下方时...但是这个导航栏其实是有bug的,比如我们重新刷新页面时,即使页面在很下面,导航栏也没有出现 这是因为我们将它放入了滚动事件中,刚刷新完是没有滚动的,所以自然不会出现,所以我们要将里面的代码封装成函数...今天学了好多呀,刚刚其实还做了一个案例,只是我懒得写了..

    67010

    浅析 Golang 垃圾回收机制

    垃圾回收算法 目前比较常见的垃圾回收算法有三种: 1.引用计数:为每个对象维护一个引用计数,当引用该对象的对象销毁时,引用计数 -1,当对象引用计数为 0 时回收该对象。...•代表语言:Python、PHP、Swift•优点:对象回收快,不会出现内存耗尽或达到某个阈值时才回收。•缺点:不能很好的处理循环引用,而实时维护引用计数也是有损耗的。...3.分代收集:按照对象生命周期长短划分不同的代空间,生命周期长的放入老年代,短的放入新生代,不同代有不同的回收算法和回收频率。...这里的三色,对应了垃圾回收过程中对象的三种状态: •灰色:对象还在标记队列中等待•黑色:对象已被标记,gcmarkBits 对应位为 1 -- 该对象不会在本次 GC 中被回收•白色:对象未被标记,gcmarkBits...对应位为 0 -- 该对象将会在本次 GC 中被清理 具体流程如下图: ?

    1.9K10

    JVM系列二:GC策略&内存申请、对象衰老

    非堆内存不GC GC不会在主程序运行期对PermGen Space进行清理,所以如果你的应用中有很多CLASS(特别是动态生成类,当然permgen space存放的内容不仅限于类)的话,就很可能出现...否则到下一步; JVM试图释放在Eden中所有不活跃的对象(minor collection),释放后若Eden空间仍然不足以放入新对象,则试图将部分Eden中活跃对象放入Survivor区; Survivor...区被用来作为Eden及old的中间交换区域,当OLD区空间足够时,Survivor区的对象会被移到Old区,否则会被保留在Survivor区; 当old区空间不够时,JVM会在old区进行major collection...GC触发条件 GC类型触发条件触发时发生了什么注意查看方式YGCeden空间不足清空Eden+from survivor中所有no ref的对象占用的内存 将eden+from sur中所有存活的对象copy...perm空间不足 显示调用System.GC, RMI等的定时触发 YGC时的悲观策略 dump live的内存信息时(jmap –dump:live)清空heap中no ref的对象 permgen中已经被卸载的

    81350

    尤大 3 天前发在 GitHub 上的 vue-lit 是啥?

    而 lit-html 就不一样了,它是基于 tagged template 的,使得它不用编译就可以在浏览器上运行,并且和 HTML Template 结合想怎么玩怎么玩,扩展能力更强,不香吗?...说 Web Components 之前我想先问问大家,大家还记得 jQuery 吗,它方便的选择器让人难忘。...我想表达的是,是不是有一天,如果浏览器原生能力足够好用的时候,React 等是不是也会像 jQuery 一样被浏览器原生能力替代?...connectedCallback:元素首次被插入文档 DOM 时 disconnectedCallback:元素从文档 DOM 中删除时 adoptedCallback:元素被移动到新的文档时 attributeChangedCallback...effect:简单理解就是 watcher const state = reactive({ name: "前端试炼", }); console.log(state); // 这里返回的是Proxy代理后的对象

    86631

    尤大 3 天前发在 GitHub 上的 vue-lit 是啥?

    而 lit-html 就不一样了,它是基于 tagged template 的,使得它不用编译就可以在浏览器上运行,并且和 HTML Template 结合想怎么玩怎么玩,扩展能力更强,不香吗?...说 Web Components 之前我想先问问大家,大家还记得 jQuery 吗,它方便的选择器让人难忘。...我想表达的是,是不是有一天,如果浏览器原生能力足够好用的时候,React 等是不是也会像 jQuery 一样被浏览器原生能力替代?...connectedCallback:元素首次被插入文档 DOM 时 disconnectedCallback:元素从文档 DOM 中删除时 adoptedCallback:元素被移动到新的文档时 attributeChangedCallback...effect:简单理解就是 watcher const state = reactive({ name: "前端试炼", }); console.log(state); // 这里返回的是Proxy代理后的对象

    94330

    尤大 几天前发在 GitHub 上的 vue-lit 是啥?

    而 lit-html 就不一样了,它是基于 tagged template 的,使得它不用编译就可以在浏览器上运行,并且和 HTML Template 结合想怎么玩怎么玩,扩展能力更强,不香吗?...说 Web Components 之前我想先问问大家,大家还记得 jQuery 吗,它方便的选择器让人难忘。...我想表达的是,是不是有一天,如果浏览器原生能力足够好用的时候,React 等是不是也会像 jQuery 一样被浏览器原生能力替代?...connectedCallback:元素首次被插入文档 DOM 时 disconnectedCallback:元素从文档 DOM 中删除时 adoptedCallback:元素被移动到新的文档时 attributeChangedCallback...effect:简单理解就是 watcher const state = reactive({ name: "前端试炼", }); console.log(state); // 这里返回的是Proxy代理后的对象

    1.4K20

    尤大 3 天前发在 GitHub 上的 vue-lit 是啥?

    而 lit-html 就不一样了,它是基于 tagged template 的,使得它不用编译就可以在浏览器上运行,并且和 HTML Template 结合想怎么玩怎么玩,扩展能力更强,不香吗?...说 Web Components 之前我想先问问大家,大家还记得 jQuery 吗,它方便的选择器让人难忘。...我想表达的是,是不是有一天,如果浏览器原生能力足够好用的时候,React 等是不是也会像 jQuery 一样被浏览器原生能力替代?...connectedCallback:元素首次被插入文档 DOM 时 disconnectedCallback:元素从文档 DOM 中删除时 adoptedCallback:元素被移动到新的文档时 attributeChangedCallback...effect:简单理解就是 watcher const state = reactive({ name: "前端试炼", }); console.log(state); // 这里返回的是Proxy代理后的对象

    94520

    尤大 4 天前发在 GitHub 上的 vue-lit 是啥?

    而 lit-html 就不一样了,它是基于 tagged template 的,使得它不用编译就可以在浏览器上运行,并且和 HTML Template 结合想怎么玩怎么玩,扩展能力更强,不香吗?...说 Web Components 之前我想先问问大家,大家还记得 jQuery 吗,它方便的选择器让人难忘。...我想表达的是,是不是有一天,如果浏览器原生能力足够好用的时候,React 等是不是也会像 jQuery 一样被浏览器原生能力替代?...connectedCallback:元素首次被插入文档 DOM 时 disconnectedCallback:元素从文档 DOM 中删除时 adoptedCallback:元素被移动到新的文档时 attributeChangedCallback...effect:简单理解就是 watcher const state = reactive({ name: "前端试炼", }); console.log(state); // 这里返回的是Proxy代理后的对象

    76850

    【JVM内存区域】

    新生代 用来存放新生的对象。一般占据堆的 1/3 空间。由于频繁创建对象,所以新生代会频繁触发MinorGC 进行垃圾回收。...Eden区 Java 新对象的出生地(如果新创建的对象占用内存很大,则直接分配到老年代)。当 Eden 区内存不够的时候就会触发 MinorGC,对新生代区进行一次垃圾回收。...老年代的对象比较稳定,所以 MajorGC 不会频繁执行。在进行 MajorGC 前一般都先进行了一次MinorGC,使得有新生代的对象晋身入老年代,导致空间不够用时才触发。...当无法找到足 够大的连续空间分配给新创建的较大对象时也会提前触发一次 MajorGC 进行垃圾回收腾出空间。...Class在被加载的时候被放入永久区域,它和存放实例的区域不同,GC不会在主程序运行期对永久区域进行清理。

    45910

    9.亿级流量电商系统JVM模型参数预估方案

    我们按照早上1小时,中午1小时,晚上1小时来计算,也就是3小时。...在第10s触发MinorGC的时候,前9s的720M数据都已经变成垃圾了,会被回收掉,最后1s的80M数据由于还有对象引用,只是暂停了业务线程,因此不是垃圾,不能被回收。会被放入S1区。...也就是说当在Survivor区经过几代的回收以后,如果对象总和大于Survivor区域的一半,则会直接放入到老年代。...而触发的原因是因为垃圾对象(这些对象1s后都变成垃圾了),这样肯定是不行的。我们需要优化JVM参数。 3. JVM优化 有问题有就解决问题。...以此类推,第三次,第四次,垃圾对象不会再进入老年代,因此也不会在发生Full GC. 由此分析,大大降低了Full GC发生的频率。

    59730

    JavaScript异步编程设计快速响应的网络应用

    Node中的EventEmitter对象 ode里面的许多对象都会分发事件:一个net.Server对象会在每次有新连接时分发一个事件, 一个fs.readStream对象会在文件被打开的时候发出一个事件...事实上,只要触发了jQuery事件,就会不被中断地按顺序执行其所有事件处理函数。 需要明确一点,如果用户点击submit按钮时,这确实是一个异步事件!!!...这个方法的行为表现与trigger类似,但有以下三个主要区别: * 第一,他不会触发浏览器默认事件。 * 第二,只触发jQuery对象集合中第一个元素的事件处理函数。...* 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。...此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined // 浏览器默认动作将不会被触发,只会触发你绑定的动作。

    2.1K31

    【JVM内存区域】

    我是廖志伟,一名Java开发工程师、幕后大佬社区创始人、Java领域优质创作者、CSDN博客专家。...新生代 用来存放新生的对象。一般占据堆的 1/3 空间。由于频繁创建对象,所以新生代会频繁触发MinorGC 进行垃圾回收。...Eden区 Java 新对象的出生地(如果新创建的对象占用内存很大,则直接分配到老年代)。当 Eden 区内存不够的时候就会触发 MinorGC,对新生代区进行一次垃圾回收。...当无法找到足 够大的连续空间分配给新创建的较大对象时也会提前触发一次 MajorGC 进行垃圾回收腾出空间。...Class在被加载的时候被放入永久区域,它和存放实例的区域不同,GC不会在主程序运行期对永久区域进行清理。

    75510
    领券