时间戳

首页 > 解决方案 > 如何让事件监听器从另一个 div 中提取数据？

javascript - 如何让事件监听器从另一个 div 中提取数据？

问题描述

我需要更改监听产品 div 中的类的事件，但我希望该函数仍然在产品 div 中提取数据.. 此刻它具有“this.open();” 所以它试图在 .available div 中找到数据（据我所知......），但显然不能。所以我需要事件监听器在点击 .available 时发生，然后搜索 this.DOM.product。

知道如何解决这个问题吗？我对DOM不太熟悉

  class Item {
      constructor(el) {
        this.DOM = {};
        this.DOM.el = el;
        this.DOM.product = this.DOM.el.querySelector('.product');
        this.DOM.productBg = this.DOM.product.querySelector('.product__bg');
        this.DOM.available = this.DOM.product.querySelector('.available');
        this.DOM.productImg = this.DOM.product.querySelector('.product__img');

        this.info = {
          img: this.DOM.productImg.src,
          title: this.DOM.product.querySelector('.product__title').innerHTML,
          subtitle: this.DOM.product.querySelector('.product__subtitle').innerHTML,
          description: this.DOM.product.querySelector('.product__description').innerHTML,
          price: this.DOM.product.querySelector('.product__price').innerHTML
        };

        this.initEvents();
      }
      open() {
        DOM.details.fill(this.info);
        DOM.details.open({
          productBg: this.DOM.productBg,
          productImg: this.DOM.productImg
        });
      }
      initEvents() {
        this.DOM.available.addEventListener('click', () => this.open());
      }

    };

标签： javascriptevents

解决方案

我怀疑您的问题是this无法解决事件处理程序中的 Item 实例。这是因为事件处理程序不会自动绑定到任何东西。

this如果这是问题所在，您可以通过在绑定事件处理程序时显式提供一个值来轻松解决它：

this.DOM.available.addEventListener('click', this.open, this);

addEventListener我向;添加了第三个参数 该参数是可选的，并控制this处理函数内的值。

注意：我还将您的处理程序从更改() => this.open()为 just this.open。原因是您无法取消绑定匿名事件处理程序，这意味着您当前的 impl 使拆卸变得不可能。

推荐阅读