如何使用 JavaScript 查找所有具有事件侦听器的元素？

Question

您可以实现ControlValueAccessor，但可能不想重新实现本机输入的方法。为此，您可以使用FormControlDirective来访问 valueAccessor。formControl并formControlName作为输入属性添加，因此它在这两种情况下都适用。如果formControlName提供，FormControl将从中检索的实例ControlContainer。@Component({      selector: 'app-custom-input',      template: `<input type="text" [formControl]="control">`,      styleUrls: ['./custom-input.component.scss'],      providers: [        {          provide: NG_VALUE_ACCESSOR,          useExisting: CustomInputComponent,          multi: true        }      ]    })    export class CustomInputComponent implements ControlValueAccessor {      @Input() formControl: FormControl;      @Input() formControlName: string;          @ViewChild(FormControlDirective, {static: true})      formControlDirective: FormControlDirective;      private value: string;      private disabled: boolean;          constructor(private controlContainer: ControlContainer) {      }          get control() {        return this.formControl || this.controlContainer.control.get(this.formControlName);      }              registerOnTouched(fn: any): void {        this.formControlDirective.valueAccessor.registerOnTouched(fn);      }          registerOnChange(fn: any): void {        this.formControlDirective.valueAccessor.registerOnChange(fn);      }          writeValue(obj: any): void {        this.formControlDirective.valueAccessor.writeValue(obj);      }    }来源：https ://medium.com/angular-in-depth/dont-reinvent-the-wheel-when-implementing-controlvalueaccessor-a0ed4ad0fafd

Answer 1

没有本机 javascript api 允许您查找使用添加的事件侦听器eventTarget.addEventListener。

您仍然可以使用onclick属性添加事件，无论该属性是使用 javascript 设置的还是通过 html 内联的 - 在这种情况下，您没有获得事件侦听器，但是您获得了onclick属性的值，这是两个不同的东西。

Javascript 没有为此提供 api，因为 dom 元素可以在事件侦听器仍然引用它们时被删除。

如果你想跟踪附加到 dom 元素的事件监听器，你必须自己做。

除了 chrome 具有getEventListeners与 dom 元素一起使用的命令行 api 之外，但它是一个开发人员工具命令行 api，因此它仅在从开发人员工具调用时才有效。

Answer 2

没有办法，直接用 JavaScript 来做。

但是，您可以使用这种方法并在将事件绑定到元素时添加属性。

document.getElementById('test2').addEventListener('keypress', function() { 

    this.setAttribute("event", "yes");

    console.log("foo");

  }

)

document.querySelectorAll('test3').forEach(item => {

    item.addEventListener('click', event => {

      this.setAttribute("event", "yes");

      console.log("bar");

    })

  })

document.getElementById('test4').onclick = function(event) {

  let target = event.target;

  this.setAttribute("event", "yes");

  if (target.tagName != 'li') {

     event.target.addClass('highlight');

  }

};

这就是您如何找到具有事件绑定到它们的元素：

var eventElements = document.querySelectorAll("[event='yes']");

var countEventElements = eventElements.length;

Answer 3

您可以扩展EventTarget.addEventListener，以便您添加的任何元素然后在其自己的标记中的HTML5 自定义 data-* 属性EventListener中声明该元素。EventListener

声明后，自定义属性将如下所示：

data-eventlisteners="['mouseover:showButton','mouseout:fadeButton','click:animateButton']"

一旦一个或多个元素具有此类自定义属性，您就可以通过 JavaScript 查询这些元素。

例如

1. document.querySelectorAll('[data-eventlisteners]')将显示页面上的哪些元素已EventListeners附加

2. document.querySelectorAll('[data-eventlisteners*=","]')将显示页面上的哪些元素EventListener附加了多个

3. document.querySelectorAll('[data-eventlisteners*="mouseover:"]')将显示页面上的哪些元素有mouseover EventListener附加的

4. document.querySelectorAll('[data-eventlisteners*="click:"][data-eventlisteners*="mouseout:"]')将显示页面上的哪些元素同时具有 aclick 和amouseout EventListener附加

等等

---

工作示例：

const declareEventListeners = () => {

  EventTarget.prototype._addEventListener = EventTarget.prototype.addEventListener;

  EventTarget.prototype.addEventListener = function(eventType, eventFunction, eventOptions) {

  

    // REINSTATE ORIGINAL FUNCTIONALITY FOR addEventListener() METHOD

    let _eventOptions = (eventOptions === undefined) ? false : eventOptions;

    this._addEventListener(eventType, eventFunction, _eventOptions);

   

    // THEN, IF EVENTTARGET IS NOT WINDOW OR DOCUMENT

    if (this.nodeType === 1) {

      let eventAction = eventFunction.name || 'anonymousFunction';

      let eventListenerLabel = `${eventType}:${eventAction}`;

      let eventListenerLabelsArray = (this.dataset.eventlisteners) ? JSON.parse(this.dataset.eventlisteners.replaceAll( "'", '"')) : [];

      eventListenerLabelsArray.push(eventListenerLabel);

      let eventListenerLabelsString = JSON.stringify(eventListenerLabelsArray).replaceAll('"', "'");

      this.dataset.eventlisteners = eventListenerLabelsString;

    }

  }

};

const clickMe = (e) => {

  e.target.classList.toggle('circle');

}

const mouseoverMe = (e) => {

  e.target.style.setProperty('background-color', 'rgb(255, 127, 0)');

}

const mouseoutMe = (e) => {

  e.target.removeAttribute('style');

}

const logMarkup = () => {

  

  console.log(document.querySelector('section').innerHTML);

}

declareEventListeners();

document.querySelector('.div1').addEventListener('click', clickMe, false);

document.querySelector('.div2').addEventListener('mouseover', mouseoverMe, false);

document.querySelector('.div2').addEventListener('mouseout', mouseoutMe, false);

logMarkup();

.div1,

.div2 {

  float: left;

  width: 100px;

  height: 100px;

  line-height: 50px;

  margin-right: 12px;

  text-align: center;

  color: rgb(255, 255, 255);

  background-color: rgb(255, 0, 0);

}

.div1 {

  line-height: 100px;

  cursor: pointer;

}

.div1.circle {

  border-radius: 50%;

}

<section>

  <div class="div1">click</div>

  <div class="div2">mouseover<br />mouseout</div>

</section>

您将在上面的示例中看到：

• .div1显示自己有一个EventListener监听click并触发函数的函数clickMe()

• .div2显示自己有两个EventListeners侦听mouseover和mouseout，分别触发功能mouseoverMe()和mouseoutMe()