为class属性添加单击事件

最新推荐文章于 2022-11-21 21:43:16 发布

原创最新推荐文章于 2022-11-21 21:43:16 发布 · 1.2w 阅读

6 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种在所有具有特定class属性的DOM元素上批量添加单击事件监听器的方法。通过获取所有class为'test'的元素，并使用for循环遍历这些元素，将testClick函数绑定到每个元素的onclick事件上，实现了对所有此类元素的点击事件响应。

默认情况下,函数无法为所有的class属性,做单击事件.
通过如下方法,为所有的class属性,添加单击事件.

<span class="test">test1</span>
    <span class="test">test2</span>
    <span class="test">test3</span>

    <p class="test">p1</p>
    <p class="test">p2</p>
    <p class="test">p3</p>

    <script>
        function testClick () {
                console.log(this);
                console.log(this.innerText);
            }
        
        // 获得某class的所有对象的方法: (返回的是数组)
        var list = document.getElementsByClassName('test');
        for(var i in list){
            // for循环给list对象数组的每个对象添加onclick单击事件,
            // 绑定testClick函数.注意函数后面不能加空格.
            list[i].onclick = testClick;
        }
    </script>