addEventListener if else 条件不起作用答案

【问题标题】：addEventListener if else condition not workaddEventListener if else 条件不起作用
【发布时间】：2018-10-16 08:53:16
【问题描述】：

我不明白为什么第二个条件不起作用（否则如果在函数内部changeText）。

当我点击它时，它会同时更改我的 clickable1 和 clickable2，而不是分别处理我的每一次点击。

我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<h1 id="clickable1"> Click me plz </h1>
<h2 id="clickable2"> Click me too plz </h2>
<script>
var text = ["thanks for clicking first", "thanks… but why only second?"];
var index = 0;
var indexId = 0;
document.getElementById("clickable1").addEventListener("click",changeText);
document.getElementById("clickable2").addEventListener("click",changeText);

function changeText(){
  if(document.getElementById("clickable1")){
    document.getElementById("clickable1").innerHTML = text[0];
  }
    else if(document.getElementById("clickable2")){
      document.getElementById("clickable2").innerHTML = text[1];
  }
}
</script>
</head>
<body>

</body>
</html>

【问题讨论】：

不要这样做if(document.getElementById("clickable1")){ document.getElementById("clickable1").innerHTML = text[0];} 虽然搜索 ID 并没有那么糟糕，但没有理由在这里浪费 CPU 精力。使用变量，例如：var clickable1 = document.getElementById("clickable1"); if(clickable1){clickable1.innerHTML = text[0];}

标签： javascript dom-events addeventlistener

【解决方案1】：

测试if (document.getElementById("clickable1")) 将：

致电getElementById
这将评估为 null（如果元素不存在）或元素（如果存在）。
测试它是否为真值（元素是，null 不是）。

您的测试与确定单击了哪个按钮无关，只有当它存在于文档中时。

this 将是附加事件处理程序的元素，因此您可以将其与按钮进行比较...

if (document.getElementById("clickable1") === this){

同时，事件对象会告诉你实际点击了哪个元素，所以你可以这样做：

function changeText(evt){
    if (document.getElementById("clickable1") === evt.target)

...当您使用 event delegation 时，这种方法会更好，因为它允许您将事件处理程序一次绑定到一个元素，该元素是可能被点击的元素的祖先。

不过，这是一种更复杂的方法，您必须考虑以下情况：

<button> a <span>b</span> c </button>

...点击按钮中的b 将为您提供<span> 元素的事件目标。

【讨论】：

【解决方案2】：

您的第二个条件永远不会运行，因为第一个条件始终为真。您正在检查 DOM 中是否存在 ID 等于 clickable1 的元素。这总是正确的。这就是为什么它永远不会进入 else if

您可以做的是检查点击的元素 ID。类似的东西

var text = ["thanks for clicking first", "thanks… but why only second?"];
var index = 0;
var indexId = 0;
document.getElementById("clickable1").addEventListener("click",changeText);
document.getElementById("clickable2").addEventListener("click",changeText);

function changeText(event){
  if(event.target.id === "clickable1"){
    document.getElementById("clickable1").innerHTML = text[0];
  }
    else if(event.target.id === "clickable2"){
      document.getElementById("clickable2").innerHTML = text[1];
  }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<h1 id="clickable1"> Click me plz </h1>
<h2 id="clickable2"> Click me too plz </h2>

</head>
<body>

</body>
</html>

【讨论】：

【解决方案3】：

嗯，条件

if(document.getElementById("clickable2"))

只检查是否存在具有clickable2 id 属性的DOM 元素。

您的问题的一个解决方案可能是将 event 参数传递给您的函数。

function changeText(event){

然后只需使用event.target 属性来找出触发click 事件处理程序的控件。

另外，您的代码可以通过使用ternary 运算符来简化：

function changeText(event){
     id = event.target.id
     document.getElementById(id).innerHTML = id == 'clickable1' ? text[0] : test[1];
}

【讨论】：