关于javascript的事件绑定

最新推荐文章于 2024-11-11 09:43:00 发布

schwarzeni

最新推荐文章于 2024-11-11 09:43:00 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/nzyalj/article/details/53526705

javascript 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一种使用事件委托的方法来简化HTML中多个<li>标签的点击事件处理。通过将事件监听器绑定到共同的父元素上，可以减少代码量并提高效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果有下面一段html代码

    <div id="wrap">
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </div>

就不用css美化了,希望可以点击其中li之一来调控div整体的样式,怎么做?

问题的核心就是要知道鼠标点击的哪个li, 我们可以给每一个<li>都加一个id, 再用js代码根据id的种类来判断点击的是哪一个<li>,就像下面

//HTML
    <div id="wrap">
        <ul>
            <li id="na">a</li>
            <li id="nb">b</li>
            <li id="nc">c</li>    
            <li id="nd">d</li>
            <li id="ne">e</li>
        </ul>
    </div>

//JAVASCRIPT
    document.getElementById("na").onclick(function(){
        .....
    });
    document.getElementById("nb").onclick(function(){
        .....
    });
    .......

但这也太烦了吧,而且id也太多了吧…………

好吧,来简单的方法了

事件委托

利用javascript的事件冒泡, 把事件的绑定移至它们的父级甚至祖父级元素上,这样只用绑定一次事件就够了!!!

//HTML
    <div id="wrap">
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </div>

//JAVASCRIPT
    var wrap = document.getElementById("wrap"),
        DIV = wrap.getElementByTagName("li");

    wrap.onclick = function (ev) {
        var ev = ev || window.event,
            target = ev.target || ev.srcElement; 
    // `||`后的两个是为了兼容ie,现在请默默诅咒IE一秒钟
        for(var i = 0, l = DIV.length; i<l; i++){
            if(DIV[i] === target){
                ......... //已选定点击的li,这里填写对应对应操作
            }
        }
    }

OK!

参考文章