js--事件委托(为新添加的LI添加高亮效果)

最新推荐文章于 2022-11-15 13:47:44 发布

马晨宇

最新推荐文章于 2022-11-15 13:47:44 发布

阅读量926

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/mcyhero/article/details/90897494

版权

js 专栏收录该内容

16 篇文章

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
        <button id="btn">添加</button>
        <ul id = "ulist">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    <body>
    </body>
</html>

 //为所有的li添加高亮事件
    var ulist = document.getElementById("ulist");
    var list = document.getElementsByTagName("li");
    var btn = document.getElementById("btn");
    //创建li
    btn.onclick = function(){
        var e = document.createElement("li");
        e.innerHTML = "新添加的元素";
        ulist.appendChild(e);
    }
    ulist.onmouseover = function(evt){
        var e = evt || event;
        var target = e.target || e.srcElement;
        if(target.tagName == "LI"){
            target.style.backgroundColor = "red";
        }
    }
    ulist.onmouseout = function(evt){
        var e = evt || event;
        var target = e.target || e.srcElement;
        if(target.tagName == "LI"){
            target.style.backgroundColor = "";
        }
    }