Javascript 将事件添加到 HTML LI 标签

Question

在下面的函数中，我想单击 LI 并在其中提醒其值。我正在使用 eventListener，但函数运行并在页面加载时发出未定义的警报

请帮忙

var x = document.getElementsByTagName('li');

function displayText(){
  alert(this.innerHTML);
}

for(var i = 0; i < x.length; i++){
  x[i].onclick = displayText();
}

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Answer 1

您将立即执行这些函数。

• 按如下方式分配函数:x[i].onclick = displayText;
• 事件参数e包含上下文中的元素:e.target

查看包含这些修复的代码片段:

var x = document.getElementsByTagName('li');

function displayText(e) {
  alert(e.target.innerHTML);
}

for (var i = 0; i < x.length; i++) {
  x[i].onclick = displayText;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

看？您的代码现在显示 警报。

资源

• GlobalEventHandlers.onclick

更新:如@James所述您可以直接在函数 displayText 中使用 this，因为您拥有该元素的上下文。

因此，您可以按如下方式实现您的函数 displayText:

function displayText() {
  alert(this.innerHTML);
}