首頁(yè) 猿問(wèn) 如何使用 JavaScript...

如何使用 JavaScript 查找所有具有事件偵聽(tīng)器的元素？

JavaScript

元芳怎么了 2022-12-29 15:50:37

您可以實(shí)現(xiàn)ControlValueAccessor，但可能不想重新實(shí)現(xiàn)本機(jī)輸入的方法。為此，您可以使用FormControlDirective來(lái)訪問(wèn) valueAccessor。formControl并formControlName作為輸入屬性添加，因此它在這兩種情況下都適用。如果formControlName提供，F(xiàn)ormControl將從中檢索的實(shí)例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); } }來(lái)源：https ://medium.com/angular-in-depth/dont-reinvent-the-wheel-when-implementing-controlvalueaccessor-a0ed4ad0fafd

查看完整描述

3 回答

慕標(biāo)琳琳

TA貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超9個(gè)贊

沒(méi)有本機(jī) javascript api 允許您查找使用添加的事件偵聽(tīng)器eventTarget.addEventListener。

您仍然可以使用onclick屬性添加事件，無(wú)論該屬性是使用 javascript 設(shè)置的還是通過(guò) html 內(nèi)聯(lián)的 - 在這種情況下，您沒(méi)有獲得事件偵聽(tīng)器，但是您獲得了onclick屬性的值，這是兩個(gè)不同的東西。

Javascript 沒(méi)有為此提供 api，因?yàn)?dom 元素可以在事件偵聽(tīng)器仍然引用它們時(shí)被刪除。

如果你想跟蹤附加到 dom 元素的事件監(jiān)聽(tīng)器，你必須自己做。

除了 chrome 具有getEventListeners與 dom 元素一起使用的命令行 api 之外，但它是一個(gè)開(kāi)發(fā)人員工具命令行 api，因此它僅在從開(kāi)發(fā)人員工具調(diào)用時(shí)才有效。

反對(duì) 回復(fù) 2022-12-29

婷婷同學(xué)_

TA貢獻(xiàn)1844條經(jīng)驗(yàn) 獲得超8個(gè)贊

沒(méi)有辦法，直接用 JavaScript 來(lái)做。

但是，您可以使用這種方法并在將事件綁定到元素時(shí)添加屬性。

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;

反對(duì) 回復(fù) 2022-12-29

12345678_0001

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊

您可以擴(kuò)展EventTarget.addEventListener，以便您添加的任何元素然后在其自己的標(biāo)記中的HTML5 自定義 data-* 屬性EventListener中聲明該元素。EventListener

聲明后，自定義屬性將如下所示：

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

一旦一個(gè)或多個(gè)元素具有此類(lèi)自定義屬性，您就可以通過(guò) JavaScript 查詢這些元素。

例如

document.querySelectorAll('[data-eventlisteners]')將顯示頁(yè)面上的哪些元素已EventListeners附加
document.querySelectorAll('[data-eventlisteners*=","]')將顯示頁(yè)面上的哪些元素EventListener附加了多個(gè)
document.querySelectorAll('[data-eventlisteners*="mouseover:"]')將顯示頁(yè)面上的哪些元素有mouseover EventListener附加的
document.querySelectorAll('[data-eventlisteners*="click:"][data-eventlisteners*="mouseout:"]')將顯示頁(yè)面上的哪些元素同時(shí)具有 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%;

}

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

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

</section>

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

.div1顯示自己有一個(gè)EventListener監(jiān)聽(tīng)click并觸發(fā)函數(shù)的函數(shù)clickMe()
.div2顯示自己有兩個(gè)EventListeners偵聽(tīng)mouseover和mouseout，分別觸發(fā)功能mouseoverMe()和mouseoutMe()