在AddEventListener上使用.bind（）「this」

我正在練習一點Javascript，不能爲我的生活找出如何綁定「這個」與事件處理程序...在AddEventListener上使用.bind（）「this」

以下是我的代碼。我試圖做到這一點，無論按鈕被點擊的顏色將變成紅色。但只有第一個按鈕變成紅色。

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

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

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

謝謝你們！

來源

2017-01-02 giantqtipz

'this'自動綁定到事件處理程序中的元素。你的問題是，'querySelector'只返回一個元素。你需要'querySelectorAll'然後遍歷返回的元素並將事件附加到每個元素。 – Teemu

你也可以使用'document.getElementsByTagName（「button」）' – Kevorkian

您可以將樣式應用到所有按鈕與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>

來源

2017-01-02 15:23:01

是否有任何理由選擇不使用'[] .forEach.call（按鈕，函數（按鈕）{...}）'？ –

@JacobHeater，請參閱編輯。 –

謝謝。永遠不會跨越我的想法，forEach是必要的...如果只是這樣使用$這個簡單haha – giantqtipz

（考慮這隻能作爲你的問題的可能性，如果你不想使用綁定運營商）

在這裏，你有兩個不同的輸入和在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);

您可以在這裏找到工作代碼：https://jsfiddle.net/97807x0f/

希望它能幫助！

來源

2017-01-02 15:19:31 avilac

爲什麼不直接使用'document.getElementsByTagName'？ OP的例子使用'document.querySelector'顯示。嘗試創建一個更接近於此的示例可能會更好。 –

沒錯，Nina Scholz的例子更加準確。 – avilac

首先使用的是querySelector得到一個按鈕

改變它querySelectorAll讓所有的按鈕和addeventlistener所有按鈕

檢查這個片段

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>

希望它可以幫助

來源

2017-01-02 15:24:42 Geeky

它沒有幫助。 nodeList是不可迭代的forEach –

他們現在... – rlemon

實際上，不在邊緣。 –

你可以簡單地做這樣的：

<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>

好的部分是它也可以用於動態添加元素。這裏的掠奪者：https://plnkr.co/edit/gWOapp6E4hQWdhrm0Z99?p=preview

來源

2017-01-02 15:39:02

在AddEventListener上使用.bind（）「this」

回答

相關問題