Javascript将事件添加到HTML LI标签

Question

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

请帮忙

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

看到？您的代码现在显示alert。

资源

• GlobalEventHandlers.onclick

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

因此，您可以按照以下方式实施功能displayText：

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