Question

我正在练习一些Javascript，并且不能为我的生活找出如何绑定＆＃34;这个＆＃34;使用事件处理程序......

以下是我的代码。我尝试制作它，以便点击任何按钮的颜色都会变为红色。但只有第一个按钮变红。

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

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

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

谢谢你们！

Answer 1

您可以使用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>

Answer 2

首先，您使用querySelector获取单个按钮

将其更改为querySelectorAll以获取所有按钮的所有按钮和addeventlistener

检查此代码段

＆＃13;

 public void onComplete(@NonNull final Task<AuthResult> task) {
       if (!task.isSuccessful()) {
       Toast.makeText(getContext(), "Authentication failed.",Toast.LENGTH_SHORT).show();
       return;
      } 
     //else Authentication Successful
      Toast.makeText(getContext(), "Authentication Successful", Toast.LENGTH_SHORT).show();
  }

＆＃13;

window.open('mailto:test@example.com');

＆＃13;

window.open('mailto:test@example.com?subject=subject&body=body');

＆＃13;

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

＆＃13;

希望有所帮助

Answer 3

（如果您不想使用绑定运算符，请将此视为问题的可能性）

这里有一个工作示例，在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/

希望它有所帮助！

Answer 4

你可以这样做：

<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

使用.bind（）＆＃34;这个＆＃34;在AddEventListener上？

4 个答案: