给10000个按钮绑定事件

最新推荐文章于 2022-10-17 16:42:17 发布

FeatureVey

最新推荐文章于 2022-10-17 16:42:17 发布

阅读量1.6k

点赞数

分类专栏： JavaScript 面试题

本文链接：https://blog.csdn.net/FeatureVey/article/details/84820020

版权

JavaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

面试题

4 篇文章 0 订阅

订阅专栏

<div class="btns" style="width:60px;margin:20px"></div>

function bindEvent() {
    for (var i = 0; i < 100; i++) {
        var btn = document.createElement('button');
        btn.innerText = "btn" + i;
        document.getElementsByClassName('btns')[0].appendChild(btn);
    }
    document.getElementsByClassName('btns')[0].addEventListener('click', function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.tagName == 'BUTTON') {
            alert(target.innerText);
        }
    }, false)
}

使用事件委托, 利用了事件的冒泡机制.

针对btn绑定事件就一定要判断点击的target是不是btn, 如果做这一步, 点击被委托的父容器其他地方也会触发事件.

不要阻止冒泡事件!

(10000只是形容数量较多, 不要当真)