相关疑难解决方法(0)

是否可以向所有动态生成的元素添加事件监听器(javascript)？我不是页面的所有者,所以我不能以静态方式添加监听器.

对于我使用的页面加载时创建的所有元素:

doc.body.addEventListener('click', function(e){
//my code
},true);

我需要一个方法来在页面上出现新元素时调用此代码,但是我不能使用jQuery(委托,on等在我的项目中无法工作).我怎样才能做到这一点？

我的应用程序中存在大量内存泄漏但我没有找到原因,这是后台.

• 我正在使用AngularJS + JQuery(插件)

• 许多听众受到如下约束:

  $(element).on("keyup",function(){});

所以问题是

我是否需要通过以下方式取消绑定指令中的听众？

scope.$on("$destroy", function() {
    $(element).off();
}); 

顺便说一句,你如何找到Web应用程序中的内存泄漏？我使用chrome的配置文件(请参阅此处分析内存性能),但我无法跟踪内存泄漏的代码.你有什么建议吗？

非常感谢!

说,我有一个元素<img id="foo" />并附加了一些事件,例如click(不是内联onclick!).

// somewhere i wrote
foo.addEventListener("click", clickHandler, false);
...
// somewhere i will write
foo.parentNode.removeChild(foo);

我是否还需要删除所有活动？

这个问题在2011年得到了回答.然而,网络场景已经发生了相当大的变化,现在IE6和IE7已经淘汰,IE8-10几乎没有出现(每个低于1%),只有IE11仍在那里.

那么,在2016年,您是否需要手动删除事件侦听器以避免内存泄漏？请考虑只有IE11的答案.我问,因为我创建了一个小型库作为jQuery的替代品,并且很想知道我是否必须先手动删除它们.当然问题是使用vanilla javascript,而不是jQuery.

是否需要基于控制取消订阅事件。

HTML 输入：

  const blur$ = fromEvent(formEle, 'blur').subscribe(x => {\n    this.focused = false;\n  });\n

表格组：

  const valChanges$ = this.fGroupRef.get('first_name').valueChanges.subscribe(val => {\n  this.hasValue = !!val;\n  });\n

寻求更深入地了解这里发生的事情：

这两种订阅都基于控件的事件，当离开控件时这些事件将被销毁。订阅是否不会取消订阅，因为它不会引用任何内容？\xe2\x80\x95OR\xe2\x80\x95订阅本身是否创建对所述控件的引用，从而使其无法进行垃圾收集？

更新忘记提及：在我的测试中，我发现blur$在组件销毁后未定义，如果取消订阅将抛出错误。但是， valChanges$.unsubscribe() 不会抛出错误，但它们都是同一组件的一部分。

我知道在jQuery中如果我们使用.remove()删除一些元素,那么将删除与元素关联的所有绑定事件和jQuery数据.对于d3来说是一样的吗？

如果答案是肯定的,那么如果我将事件绑定到svg中的节点.on()然后删除svg使用.remove(),则svg 上所有节点的所有事件也都是未绑定的(即svg子节点的事件)去掉)？

如果上述任何一个问题的答案都是肯定的,我假设我需要手动取消绑定元素.on('eventType',null).我试图为这样的东西写一个通用函数,看起来像:

function unbindCommonEvents(elem){
  var eventTypes = ['click','dblclick','mousedown','mouseup','mouseover','mousemove','mouseout','dragstart','drag','dragenter','dragleave','dragover','drop','dragend','Keyboard','keypress','keyup','load','unload','abort','error','resize','scroll','select','change','submit','reset','focus','blur','focusin','focusout','zoom'];
  for (var i = 0; i < eventTypes.length; i++) {
    elem.on(eventTypes[i],null);
  };
return false;
}

但是,这看起来很麻烦.必须有一个更优雅的解决方案,也许类似于此处发布的解决方案？

我有一个动画，动画完成后我使用局部视图来更新数据。 .on('animationend webkitAnimationEnd oAnimationEnd')似乎只是第一次开火。知道为什么会发生这种情况，就像 JQuery 无法识别.Here是我希望它做的事情$('#marqueeTop span')的jsfiddle。

部分的

<div id="marqueeTop">
    <span class="moveTop">
        @foreach(var item in Model){
            <label>
                @Html.DisplayFor(x => item.GroupName)
                @Html.DisplayFor(x => item.Sales ).....
            </label>   
        }
    </span>
</div>

CSS

#marqueeTop {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

#marqueeTop span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    font-family:wallStreetFont;
}
.moveTop{
    animation: marqueeTop 5s linear infinite;
    animation-iteration-count:1;
}

查询

 $('#marqueeTop span').on('animationend webkitAnimationEnd oAnimationEnd', function () {
    $.get('/Home/GetBookingsTicker', function (response) …

使用angularjs,我正在显示这样的2级列表

- first main item
  - first subitem of the first main item
  - second subitem of the first main item
  - AN EMPTY ITEM AS PLACEHOLDER TO ENTER THE NEXT SUBITEM
- second main item
  - first subitem of the second main item
  - second subitem of the second main item
  - AN EMPTY ITEM AS PLACEHOLDER TO ENTER THE NEXT SUBITEM

为了节省空间,我只想在相应的任何东西div都有焦点的情况下展示PLACEHOLDER ,这样只有一个这样的占位符.我知道有ngFocus,但我更喜欢比创建大量事件处理程序更简单的东西.也许是这样的:

<div ng-focus-model="mainItem.hasFocus" ng-repeat="mainItem in list">
   ... main item line
   ... all …

我创建了自己的小图像滑块,为了让加载器工作,我必须创建一个addEventListener然后将加载的图像附加到DOM中.

但是,在这种情况下存在一个错误:当图像需要一段时间加载并且用户在加载之前点击它以查看下一个图像时,事件监听器仍然在后台工作,并且当图像完全时加载它会覆盖用户当前正在查看的内容.

我的HTML:

<template name="ImageGallery">
    {{#each galleryImages}}
        {{#if viewingImage}}
            {{> Image}}
        {{/if}}
    {{/each}}
</template>

<template name="Image">
    <div class="image-in-gallery">LOADING</div>
</template>

检查用户想要看到的"图像" 是否是我们在each迭代中遇到的图像(从而显示它):

Template.ImageGallery.helpers({
    viewingImage: function() {
        var self = this
        var galleryImages = Template.parentData().galleryImages
        var renderImage = false
        var viewing = Template.instance().viewingImage.get()
        var posOfThisImage = lodash.indexOf(galleryImages, self)
        if (viewing === posOfThisImage) {
            renderImage = true
        }
        return renderImage
    }
})

允许用户查看下一个"图像"并在我们结束时循环:

Template.ImageGallery.events({
    'click .click-to-see-next-image': function(event, template) {
        var viewing = template.viewingImage.get()
        var imageCount …

我有一个Backdrop_DIV基于open下拉组件的a 呈现的。

{open &&
  <LS.Backdrop_DIV
    onClick={handleBackdropClick}
    ref={backdrop_ref}
  >
    Backdrop
  </LS.Backdrop_DIV>
}

Backdrop_DIV如果用户滚动 ( touchmove)，我希望它消失。

Obs：这是一个移动视图。

const handleTouchMove = useCallback(()=>{
    setOpen(false);
  },[]);

useEffect(() => {
    if (open) {
      // ATTACHING THE EVENT LISTENR
      backdrop_ref.current.addEventListener('touchmove', handleTouchMove );
    }

    // ATTEMPT TO REMOVE THE EVENT LISTENER
    return () => 
      backdrop_ref.current.removeEventListener('touchmove', handleTouchMove);

},[open,handleScroll]);

它有效，但如果在我尝试清除我的useEffect. 有没有办法做到这一点？

错误：

react-dom.development.js:20313 未捕获的类型错误：无法读取 null 的属性“removeEventListener”

这个错误很明显，因为Backdrop_DIV它在运行时不再挂载。

题

在这种情况下，我需要费心删除事件侦听器吗？我能做什么？