如何使用 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() {&nbsp;&nbsp; &nbsp; this.setAttribute("event", "yes");&nbsp; &nbsp; console.log("foo");&nbsp; })document.querySelectorAll('test3').forEach(item => {&nbsp; &nbsp; item.addEventListener('click', event => {&nbsp; &nbsp; &nbsp; this.setAttribute("event", "yes");&nbsp; &nbsp; &nbsp; console.log("bar");&nbsp; &nbsp; })&nbsp; })document.getElementById('test4').onclick = function(event) {&nbsp; let target = event.target;&nbsp; this.setAttribute("event", "yes");&nbsp; if (target.tagName != 'li') {&nbsp; &nbsp; &nbsp;event.target.addClass('highlight');&nbsp; }};这就是您如何找到具有事件绑定到它们的元素：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 查询这些元素。例如document.querySelectorAll('[data-eventlisteners]')将显示页面上的哪些元素已EventListeners附加document.querySelectorAll('[data-eventlisteners*=","]')将显示页面上的哪些元素EventListener附加了多个document.querySelectorAll('[data-eventlisteners*="mouseover:"]')将显示页面上的哪些元素有mouseover&nbsp;EventListener附加的document.querySelectorAll('[data-eventlisteners*="click:"][data-eventlisteners*="mouseout:"]')将显示页面上的哪些元素同时具有 aclick&nbsp;和amouseout&nbsp;EventListener附加等等工作示例：const declareEventListeners = () => {&nbsp; EventTarget.prototype._addEventListener = EventTarget.prototype.addEventListener;&nbsp; EventTarget.prototype.addEventListener = function(eventType, eventFunction, eventOptions) {&nbsp;&nbsp;&nbsp; &nbsp; // REINSTATE ORIGINAL FUNCTIONALITY FOR addEventListener() METHOD&nbsp; &nbsp; let _eventOptions = (eventOptions === undefined) ? false : eventOptions;&nbsp; &nbsp; this._addEventListener(eventType, eventFunction, _eventOptions);&nbsp; &nbsp;&nbsp; &nbsp; // THEN, IF EVENTTARGET IS NOT WINDOW OR DOCUMENT&nbsp; &nbsp; if (this.nodeType === 1) {&nbsp; &nbsp; &nbsp; let eventAction = eventFunction.name || 'anonymousFunction';&nbsp; &nbsp; &nbsp; let eventListenerLabel = `${eventType}:${eventAction}`;&nbsp; &nbsp; &nbsp; let eventListenerLabelsArray = (this.dataset.eventlisteners) ? JSON.parse(this.dataset.eventlisteners.replaceAll( "'", '"')) : [];&nbsp; &nbsp; &nbsp; eventListenerLabelsArray.push(eventListenerLabel);&nbsp; &nbsp; &nbsp; let eventListenerLabelsString = JSON.stringify(eventListenerLabelsArray).replaceAll('"', "'");&nbsp; &nbsp; &nbsp; this.dataset.eventlisteners = eventListenerLabelsString;&nbsp; &nbsp; }&nbsp; }};const clickMe = (e) => {&nbsp; e.target.classList.toggle('circle');}const mouseoverMe = (e) => {&nbsp; e.target.style.setProperty('background-color', 'rgb(255, 127, 0)');}const mouseoutMe = (e) => {&nbsp; e.target.removeAttribute('style');}const logMarkup = () => {&nbsp;&nbsp;&nbsp; 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 {&nbsp; float: left;&nbsp; width: 100px;&nbsp; height: 100px;&nbsp; line-height: 50px;&nbsp; margin-right: 12px;&nbsp; text-align: center;&nbsp; color: rgb(255, 255, 255);&nbsp; background-color: rgb(255, 0, 0);}.div1 {&nbsp; line-height: 100px;&nbsp; cursor: pointer;}.div1.circle {&nbsp; border-radius: 50%;}<section>&nbsp; <div class="div1">click</div>&nbsp; <div class="div2">mouseover<br />mouseout</div></section>您将在上面的示例中看到：.div1显示自己有一个EventListener监听click并触发函数的函数clickMe().div2显示自己有两个EventListeners侦听mouseover和mouseout，分别触发功能mouseoverMe()和mouseoutMe()