Javascript 使用addEventListener替换每个onClick

我在下面列出了水果、动物、树木的无序列表……大约100个相同类别的按钮：

<ul>
   <li><button class="bb" value="apple" onClick="aJax(value)">Apple</button></li>
   <li>Banana
      <ul>
         <li><button class="bb" value="green_banana" onClick="aJax(value)">Green_banana</button></li>
         <li><button class="bb" value="yellow_banana" onClick="aJax(value)">Yellow Banana</button></li>
      </ul>
   </li>
   <li><button class="bb" value="cherry" onClick="aJax(value)">Cherry</button></li>
   <li><button class="bb" value="cow..................and more....
</ul>

苹果
香蕉

绿香蕉
黄香蕉


樱桃
试试看：

window.addEventListener( 'load' , function () {

    var list = document.querySelectorAll( 'ul > li > button' );

    for ( var i = 0 , l = list.length ; i < l ; i++ ) {

        list[ i ].addEventListener( 'click' , function () {
            aJax( this.value );
        } );

    }

} );

window.addEventListener（'load'，function（）{
var list=document.querySelectorAll（'ul>li>button'）；
for（变量i=0，l=list.length；i
试试看：

window.addEventListener( 'load' , function () {

    var list = document.querySelectorAll( 'ul > li > button' );

    for ( var i = 0 , l = list.length ; i < l ; i++ ) {

        list[ i ].addEventListener( 'click' , function () {
            aJax( this.value );
        } );

    }

} );

window.addEventListener（'load'，function（）{
var list=document.querySelectorAll（'ul>li>button'）；
for（变量i=0，l=list.length；i
是的，您可以：


var bbs=document.getElementsByClassName（“bb”）；
对于（变量i=0；i


苹果
香蕉
樱桃
是的，您可以这样做：


var bbs=document.getElementsByClassName（“bb”）；
对于（变量i=0；i


苹果
香蕉
樱桃
最简单的方法（无需循环）


var container=document.querySelector（“ul”）；
container.addEventListener（“单击”，doSomething，false）；
功能剂量测定法（e）{
如果（e.target！==e.currentTarget）{
var clickedItem=e.target.value；
console.log（单击编辑项）；
}
e、 停止传播（）；
}

苹果
香蕉
樱桃
最简单的方法（无需循环）


var container=document.querySelector（“ul”）；
container.addEventListener（“单击”，doSomething，false）；
功能剂量测定法（e）{
如果（e.target！==e.currentTarget）{
var clickedItem=e.target.value；
console.log（单击编辑项）；
}
e、 停止传播（）；
}

苹果
香蕉
樱桃
虽然其他答案是正确的，但如果您的列表很长，您可以将单击委派给
ul
元素：


函数日志值（evt）{
设target=evt.target；
//仅当单击目标具有类“bb”时才使用console.log
if（target.classList.contains（“bb”））{
console.log（target.value）
}
}
//等待加载文档
window.addEventListener（“加载”，（）=>{
let list=document.querySelector（“.my list”）；
如果（列表）{
//将单击处理程序委托给
元素
列表。addEventListener（“单击”，日志值）；
}
});

苹果
香蕉

绿香蕉
黄香蕉


樱桃
虽然其他答案是正确的，但如果您的列表很长，您可以将单击委派给
ul
元素：


函数日志值（evt）{
设target=evt.target；
//仅当单击目标具有类“bb”时才使用console.log
if（target.classList.contains（“bb”））{
console.log（target.value）
}
}
//等待加载文档
window.addEventListener（“加载”，（）=>{
let list=document.querySelector（“.my list”）；
如果（列表）{
//将单击处理程序委托给
元素
列表。addEventListener（“单击”，日志值）；
}
});

苹果
香蕉

绿香蕉
黄香蕉


樱桃
添加事件侦听器时，最好避免使用匿名函数，因为如果要在之后删除它们，“removeEventListener”将失败，因为它需要完全相同的参数。您好，我只是更改了一点ul li，使ul内有ul，你的代码还可以使用吗？在添加事件侦听器时最好避免匿名函数，因为如果你想在之后删除它们，“removeEventListener”将失败，因为它需要完全相同的参数。嗨，我只是更改了一点ul li，使ul在ul内，你的代码还可以使用吗？授权点击
ul
是最好的方法。我只需更改一点ul-li，使ul成为ul内部的ul，你的代码还可以使用吗？我编辑过，所以你可以自己检查；-）（是的，它确实有效）唯一的规则是将对点击做出反应的元素必须是
ul的子元素。我的列表
元素，并且只有这些“点击启用”元素（它们是
ul的子元素。我的列表
）具有
bb
类。将点击委托给
ul
是最好的方法，我只是改变了一点ul-li，使ul在ul内，你们的代码还可以使用吗？我编辑过，所以你们可以自己检查；-）（是的，它确实起作用）唯一的规则是将对点击做出反应的元素必须是
ul的子元素。我的列表
元素，并且只有这些“点击启用”元素（它们是
ul的子元素。我的列表
）具有
bb
类。如果没有循环，它会运行得更快吗？当然！使用事件委派模型有两个主要好处。首先，在生成许多事件的应用程序中，它的性能要好得多。其次，它支持通过对象（而不是生成事件的对象）处理事件。这是一个组件设计和使用之间的清晰分离。没有循环，它会运行得更快吗？当然！使用事件委派模型有两个主要好处。首先，在生成许多事件的应用程序中，它的性能要好得多。其次，它支持通过对象（而不是生成事件的对象）处理事件。这是一个