Javascript利用闭包循环绑定事件

最新推荐文章于 2022-03-27 17:16:29 发布

原创最新推荐文章于 2022-03-27 17:16:29 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #XHTML #HTML #ViewUI

javascript学习专栏收录该内容

37 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用JavaScript实现列表项的鼠标悬停变色效果及点击时显示其序号的功能。通过为每个列表项添加mouseover和mouseout事件，改变背景颜色，增强用户体验；同时，利用自定义函数在点击时弹窗显示当前项目的序号。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
</head>
<body>
<ul id="list">
<li>第1条记录</li>
<li>第2条记录</li>
<li>第3条记录</li>
<li>第4条记录</li>
<li>第5条记录</li>
<li>第6条记录</li>
</ul>
<script type="text/javascript">
    function tt(nob) {
        this.clickFunc = function() {
        alert("这是第" + (nob + 1) + "记录");
        }
    }
    var list_obj = document.getElementById("list").getElementsByTagName("li"); //获取list下面的所有li的对象数组
    for (var i = 0; i <= list_obj.length; i++) {
        list_obj[i].onmousemove = function() {
            this.style.backgroundColor = "#cdcdcd";
        }
        list_obj[i].onmouseout = function() {
            this.style.backgroundColor = "#FFFFFF";
        }
        var col = new tt(i);
        list_obj[i].onclick = col.clickFunc;
    }
</script>
</body>
</html>