Verwenden von .bind() "this" auf AddEventListener?

Ich übe ein wenig Javascript und kann nicht für das Leben von mir herausfinden, wie man "diese" mit einem Event-Handler zu binden ...Verwenden von .bind() "this" auf AddEventListener?

Unten ist mein Code. Ich versuche es so zu machen, dass die Farbe des Knopfes rot wird. Aber nur der erste Knopf wird rot.

<button>1</button> 
<button>2</button> 

var change = function() { 
    this.style.color = "red"; 
} 

var button = document.querySelector("button"); 
button.addEventListener("click", change, false);

Danke Jungs!

Quelle

2017-01-02 giantqtipz

'this' wird automatisch an das Element in einem Event-Handler gebunden. Ihr Problem ist, dass 'querySelector' nur ein einzelnes Element zurückgibt. Sie würden 'querySelectorAll' benötigen und dann die zurückgegebenen Elemente durchlaufen und das Ereignis an jedes Element anhängen. – Teemu

Sie können auch 'document.getElementsByTagName (' button ')' verwenden – Kevorkian

Sie können den Stil auf alle Tasten mit Element#querySelectorAll

var change = function(){ 
 
    this.style.color = "red"; 
 
} 
 

 
var buttons = document.querySelectorAll("button"); 
 

 
[].forEach.call(buttons, function (button) { 
 
    button.addEventListener("click", change, false); 
 
});

<button>1</button> 
 
<button>2</button>

Quelle

2017-01-02 15:23:01

Gibt es einen Grund, warum Sie '' .forEach.call (buttons, function (button) {...}) '' nicht verwenden? –

@JacobHeater, siehe Bearbeiten. –

danke. wäre mir nie in den Sinn gekommen, dass forEach gebraucht wird ... wenn es nur so einfach ist wie $ haha – giantqtipz

(Betrachten Sie dies nur als Möglichkeit, Ihr Problem, wenn Sie nicht verbindlich Operator verwenden wollen) Sie

Hier haben ein funktionierendes Beispiel mit zwei verschiedenen Eingängen und zwei verschiedene Elemente in javascript:

HTML:

<button id="button1">1</button> 
<button id="button2">2</button>

Javascript:

var change = function(){ 
    this.style.color = "red"; 
} 

var button1 = document.getElementById("button1"); 
var button2 = document.getElementById("button2"); 

button1.addEventListener("click", change, false); 
button2.addEventListener("click", change, false);

Sie den Arbeits Code finden Sie hier: https://jsfiddle.net/97807x0f/

Hoffe, es hilft!

Quelle

2017-01-02 15:19:31 avilac

Warum nicht einfach 'document.getElementsByTagName' verwenden? Das Beispiel von OP wurde mit 'document.querySelector' angezeigt. Es könnte besser sein, ein Beispiel zu erstellen, das näher daran ist. –

Das stimmt, Nina Scholz Beispiel ist viel genauer. – avilac

gelten

Erstens verwenden Sie querySelector einer einzigen Taste es

Änderung zu bekommen, um zu querySelectorAll alle Tasten zu erhalten und addeventlistener für alle Schaltflächen

überprüfen Sie diese Schnipsel

var change = function() { 
 
    this.style.color = "red"; 
 
} 
 
window.onload = function() { 
 
    var button = document.querySelectorAll("button"); 
 
    button.forEach(function(element) { 
 

 
    element.addEventListener("click", change, false); 
 
    }); 
 

 
}

<button>1</button> 
 
<button>2</button>

var change = function() { 
 
    this.style.color = 'red'; 
 
} 
 
window.onload = function() { 
 
    var button = document.getElementsByTagName('button'); 
 

 
    for (var i = 0; i < button.length; i++) { 
 
    button[i].addEventListener('click', change, null); 
 
    } 
 
}

<button>1</button> 
 
<button>2</button>

Hoffe, dass es

Quelle

2017-01-02 15:24:42 Geeky

es hilft nicht. die nodeList ist nicht iterable mit forEach –

Sie sind jetzt ... – rlemon

eigentlich nicht an der Kante. –

hilft können Sie einfach tun es wie folgt aus:

<button>1</button> 
<button>2</button> 

<script> 
    var change = function(e){ 
    var e = window.e || e; 

    if (e.target.tagName !== 'BUTTON') 
     return; 


    e.target.style.color = "red"; 
} 

document.addEventListener('click', change, false); 
</script>

Der gute Teil ist, dass es auch für dynamisch hinzugefügtes Element funktioniert. Hier ist der Fehler: https://plnkr.co/edit/gWOapp6E4hQWdhrm0Z99?p=preview

Quelle

2017-01-02 15:39:02

Verwenden von .bind() "this" auf AddEventListener?

Antwort

Verwandte Themen