委托。Angular中的EventEmitter或Observable
我正在尝试在Angular中实现类似的委托模式. 当用户单击nav-item时,我想调用一个函数,然后发出一个事件,又应由其他组件收听该事件来处理. 这是场景:我有一个Navigation组件: import {Component, Output, EventEmitter} from 'angular2/core'; @Component({ // other properties left out for brevity events : ['navchange'], template:` ` }) export class Navigation { @Output() navchange: EventEmitter = new EventEmitter(); select
0 2024-02-20
编程技术问答社区
为什么这个节流功能中的事件监听器会有这样的表现?
我正在寻找一种将onclick();或函数应用于我页面中的所有标签的方法,甚至是以后创建的标签,例如所有此类html标签的通用顺序. 尽管ID类类型或任何其他属性仅标签名称. 编辑:@Mhodges通过介绍请注意,您应该使用toLowerCase() 解决方案 在其中放一个类,然后当您使用onclick时,使用$(".classname") 搜索它们 其他解决方案 我不知道普通的JavaScript还是jQuery也允许? $('body').on('click', 'span', function() { }); 这里一个小例子 在 $( document ).ready(function() { let i = 1; $('button').on('click', function() { i++; $('#wrapper').append(' ' + i + '
0 2024-01-19
编程技术问答社区
如何在多个输入字段上使用addEventListener来调用JavaScript中的keyup事件?
我有多个输入字段,我想在所有输入字段上将其应用于所有内容,并将其传递给文本框的ID作为参数.我想要多个键入事件,因为我想根据输入ID处理一些计算.我尝试但失败了.请建议一些解决方案. function GetDynamicTextBox(value) { return "" +"" +" " +"
2 2024-01-19
编程技术问答社区
addEventListener与onclick的事件委托关系
我正在学习事件的工作原理,主要是addEventListener中的事件捕获和冒泡.此文章非常适合整体理解. 捕获和冒泡定义了父元素中发生事件的顺序.据我了解,重要的由于事件委托. addEventListener实际上并未为您委派事件,它只是搜索委派事件,这是正确的吗? 还有其他原因搜索DOM层次结构,而不是事件委托? 当我将DOM level 1 onclick事件附加到父元素上并单击其一个孩子时,我仍然将子元素作为事件target.因此,我看不到将事件侦听器附加到子元素,然后冒泡以搜索委派元素的重点.我在这里一定有一些东西. 肯定是您手动维护委派事件,无需通过DOM层次结构来搜索委托事件? 解决方案 和addEventListener实际上没有为您委派事件,它只是搜索委派事件,这是正确的吗? 否.它绝对没有事件委托,但可以用作事件委托的一部分. addEventListener方法将事件侦听器添加到DOM节点,该dom节点在事件泡出或传播到
2 2024-01-19
编程技术问答社区
在动态生成的输入上委派typeahead
我有一个我用来输入库存详细信息的HTML表.在此表中,我有一个用于绑定Bootstrap的产品名称的输入框,但问题是第一个行输入框该页面呈现时已经存在,Typeahead可以正常工作.知道在这种情况下如何实现它.以此为指导我完成. 提前致谢. 这是我的HTML表 - Product name Amount 这是用于添加新行的JavaScript- $(f
2 2024-01-18
编程技术问答社区
1.7.2中的jQuery事件授权
有什么方法可以使用jQuery委派事件,该事件将对与选择器匹配的页面上的所有元素,除了$(document)>? 委派 由于措辞可能很差,所以这是摩擦: 曾经有jQuery.live将事件委派给了与选择器相匹配的所有元素.这是由jQuery.delegate取代的,在特定上下文中,将事件委派给了其孩子,而这些事件反过来又被jQuery.on取代,jQuery.on实际上确实是同一件事,但幕后有不同的位置(我想). 我想做的是安全地将事件处理程序添加到我的页面上的每个div.foo上,无论它可以在哪里或何时居住.根据文档和实证研究,以下内容仅与运行脚本时存在的.foo元素结合.由于有代码可能在稍后在页面上放置一个.foo元素,因此这不确定. jQuery('.foo').on('click', handler); 由于live被弃用(可能已删除?),我正在尝试不使用它,但是我能提出的唯一解决方案是 jQuery(document).on('click', '
2 2024-01-18
编程技术问答社区
Html的onclick属性与脚本的onclick事件监听器的关系
作为初学者,我只是在尝试各种HTML元素和脚本.然后,我遇到了html属性 onclick . 当我在对HTML实验之前做了更多的脚本,我想知道通过DOM本身或通过JS/JQuery的活动侦听器调用函数之间是否有区别. 例如: - html button 1 vs脚本 button 2 $(document).on('click','#btn2",function(){ //code here }); 我也想了解优点和缺点,以及两个是最佳实践. 请告诉我,如果我打破了在这里提出问题的规则,以便我可以修改/删除问题. 解决方案 我也想了解优点和缺点,以及两个是最佳实践. " vs脚本"的优点: 可以添加元素而
2 2024-01-18
编程技术问答社区
定义事件委托器的正确语法
通常,您为按下按钮写一个处理程序: $(document).ready(function() { $("button").click(function() { doSomething(); }); }); 但在事件代表们,响应具有这样的函数的事件: function doSomething(event) { if (ev.target.id == 'button1' ) { //do your stuff console.log('#button1 click'); } else { console.log('not a #button1 click'); } } 我感到困惑的是正确的语法,用于定义称之为该代表人函数的事件 - 这是吗? (a): $(document).ready(function() { $(function
0 2024-01-17
编程技术问答社区
按键事件只发射一次
我这样做: $(".classname").bind("keypress",function(){ alert("event happened"); }) 代码类似于上面的代码,我的意思是,您第一次键入并单击Enter时,它正在工作,但是下次,它根本没有做出反应. $("#id").bind("keypress",function(){ alert("haiii"); }) 第二个代码一直在工作,但第一个代码仅工作一次. 同样,如果运行第二个代码一次,则第一个代码甚至都不会运行一次. 解决方案是什么?我想我在这里缺少一些规则,您能告诉他们,以便我搜索它们. 谢谢 解决方案 事件粘合剂应始终可用;如果不是,那是因为您正在更改HTML结构(附加节点或删除节点).在您的情况下,您需要在运行时动态更改HTML,需要使用.on() 尝试此而不是.bind(): $('#id').on({ keypress:
4 2024-01-16
编程技术问答社区
使用jquery hammer.js 2和事件授权的长按(按住)。
我最近升级为Hammer.js 2,我注意到的第一件事是" hold"已被" press"代替. 我的旧代码在事件委托中效果很好,但是当我将其放在特定元素上时,切换到按下似乎有效. 注意:我通过jQuery插件使用Hammer.js hammer.js 1 $(element).hammer().on("hold",callback); 工作正常 $(rootElement).hammer().on("hold",".elementSelector",callback); 工作正常 hammer.js 2 这个 $(element).hammer().on("press",callback); 工作正常,而这个 $(rootElement).hammer().on("press",".elementSelector",callback); 没有.回调永远不会被解雇. 解决方案 锤子事件已简化为新版本中的速度.要
2 2024-01-15
编程技术问答社区
在jQuery验证插件中自定义事件代理
我目前正在设置用于在我们项目中使用的jQuery验证插件. 默认情况下,有一些事件自动设置用于处理. IE.集中/外,关键事件在所有输入验证验证上.我希望它仅在单击提交按钮时发射. 此功能似乎是在插件中内置构建的,这使得很难执行此操作(不修改插件代码,而不是我想做的). 我在插件代码原型方法中找到了EventDelegate函数调用: $(this.currentForm) .validateDelegate(":text, :password, :file, select, textarea", "focusin focusout keyup", delegate) .validateDelegate(":radio, :checkbox, select, option", "click", delegate); 当我从插件中删除这些行时,我会得到结果,但是我宁愿在插件之外做一些事情来实现此目的
8 2024-01-14
编程技术问答社区
jQuery在大型列表的点击事件上的委托性能--如果你动态地添加更多的元素,速度会变慢?
我有一个类似的项目的视觉列表: > 在真实的应用中,我只加载了200个总项目.但是问题是click事件即使只有200个项目也需要几乎一秒钟的时间来打电话给处理程序.无论列表中有多少个项目,mouseover事件回调立即执行. 我的问题是,无论页面上有多少个元素,委托方法是否应该一样快吗?我要做的就是这样: $("body").delegate("a", "click", function(event) { console.log($(event.target).get(0)); return false; } 如果您转到上面的JSFIDDLE示例和Web检查器,然后单击渲染结果中的链接,它将添加200个元素.请注意,您添加的元素越多,得到的元素越慢.奇怪的是,如果您从6000个项目开始,则委托/单击执行速度要比从2000开始,并且一次添加200个直到达到6000. . 您有什么想法,如何改善delegate click事件的性能? CSS会导致这种情况放慢
2 2024-01-13
编程技术问答社区
移除特定对象上的jQuery委托事件处理程序
我使用单个选择器将委派的事件处理程序附加到页面上的许多元素.由于事件是针对各个元素触发的,因此我想根据某些条件逻辑关闭 事件处理程序. 这意味着我不一定希望在第一次点击上禁用该事件.但是我不知道如何不关闭所有这些方法. html: One Two Three JS: $(document).on('click', 'button', function(ev) { // doesn't work because argument needs to be a string $(document).off('click', $(ev.target)); // doesn't do what I want b/c turns off events on all buttons, not just this one $(document).o
2 2024-01-12
编程技术问答社区
jQuery.on()的功能是什么?
我还没有看到此功能的来源,但我想知道,它是否有效: 选择元素的选择器 将提供的事件处理者委托给他们 在该选择器上运行A setInterval,并不断取消淘汰,然后重新延长同一事件 或对此有纯javascript dom解释? 解决方案 我认为您的问题是关于事件委托 .on的版本. 在JavaScript中,大多数事件泡泡这意味着,当一个可能为元素开火的事件时,它将起泡到dom直到document级别. . 考虑此基本标记: 1 2 现在我们应用事件委托: $('div').on('click', 'span', fn); 事件处理程序仅附加到元素.由于span在div内部的内部,跨度的任何单击都会吸引到div,触发div的单击处理程序.那一刻,剩下的就是检查 event.target (或任何一个目标和 delegateTarget )与委
0 2024-01-11
编程技术问答社区
jQuery中的事件委托,如何做?
在JavaScript中,我曾经使用这样的事件委托: someDiv.addEventListener('click', function(evt){ if(evt.target.id == "#someChild"){ // Do something.. } else if(evt.target.id == "#anotherChild"){ // Do something else.. } }, false); 在jQuery中相当于什么?我知道.on()但是如何在事件委托中使用它?我的意思是这是如何完成的: someDiv.on('click, '#someChild, #anotherChild", function(evt){ if($(this).is("#someChild")){ // Do something.. } else if($(this).is(
0 2024-01-11
编程技术问答社区
如何用jquery live停止事件冒泡?
我试图停止一些事件,但停止propagation不适用于" Live",因此我不确定该怎么做.我在他们的网站上找到了这个. 现场活动不会在 传统的方式,不能 停止使用stoppropagation或 停止中间po虫.例如, 采取两个点击事件的情况 - 一个绑定到" li",另一个绑定为" li a". 是否在内部发生点击 锚定两个事件将被触发. 这是因为当 $(" li").绑定(" click",fn);是绑定的 您实际上是在说"每当 点击事件发生在LI元素上 - 或在Li元素内部 - 触发此 点击事件."进一步停止 进行现场活动的处理,FN必须 返回false 它说fn必须返回false,所以我尝试做的 $('.MoreAppointments').live('click', function(e) { alert("Hi"); return false; }); 但这不起作用,所以我不确定如何使其返回false. 更新 这是一些更多
2 2024-01-11
编程技术问答社区
从经典的事件管理到JavaScript OOP中的事件授权
旧事件管理,在目标元素上直接附加针对特定操作的每个处理程序已经过时了,因为关于性能和记忆节省的考虑开始在开发人员社区中传播. 事件委托实现以来,jQuery用新的.bind()和.live()方法使用了新的.on()>允许委派的方法. 这决定了某些经验丰富的方法的变化,需要在其中使用事件委托返工. 我正在尝试在保留图书馆的编码样式的同时进行一些最佳练习,并寻找其他开发人员面临的类似情况来找到答案. 将OOP与函数用作构造函数,我通常具有这样的对象创建的接口: var widget = new Widget({ timeout: 800, expander: '.expanders' }); 用作为参数给出的对象文字,提供了传递的输入的名称和值的简洁地图.该代码的基础类可能是以下内容: var Widget = function(options) { // some private members var _timeout;
4 2023-08-03
编程技术问答社区
Vanilla JS事件委托-处理目标元素的子元素
我正在尝试在Vanilla JS中进行活动代表团.我在这样的容器内有一个按钮 Go again 和关注 David Walsh的好指示所以: this.container.addEventListener('click', function(e){ if (e.target && e.target.id == 'game-again') { e.stopPropagation(); self.publish('primo:evento'); } }); 其中this.container是#quiz元素.这是一半时间的工
4 2023-06-18
编程技术问答社区