亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

元芳怎么了 2022-12-29 15:50:37
您可以實現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
查看完整描述

3 回答

?
慕標琳琳

TA貢獻1830條經驗 獲得超9個贊

沒有本機 javascript api 允許您查找使用添加的事件偵聽器eventTarget.addEventListener。

您仍然可以使用onclick屬性添加事件，無論該屬性是使用 javascript 設置的還是通過 html 內聯的 - 在這種情況下，您沒有獲得事件偵聽器，但是您獲得了onclick屬性的值，這是兩個不同的東西。

Javascript 沒有為此提供 api，因為 dom 元素可以在事件偵聽器仍然引用它們時被刪除。

如果你想跟蹤附加到 dom 元素的事件監聽器，你必須自己做。

除了 chrome 具有getEventListeners與 dom 元素一起使用的命令行 api 之外，但它是一個開發人員工具命令行 api，因此它僅在從開發人員工具調用時才有效。


查看完整回答
反對 回復 2022-12-29
?
婷婷同學_

TA貢獻1844條經驗 獲得超8個贊

沒有辦法，直接用 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;


查看完整回答
反對 回復 2022-12-29
?
12345678_0001

TA貢獻1802條經驗 獲得超5個贊

您可以擴展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()


查看完整回答
反對 回復 2022-12-29
  • 3 回答
  • 0 關注
  • 231 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號