JavaScript给每一个li节点绑定点击事件

最新推荐文章于 2024-07-24 16:38:25 发布

西红柿炒番茄AB

最新推荐文章于 2024-07-24 16:38:25 发布

阅读量8.1k

点赞数 2

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/a_sid/article/details/53421465

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

1.双击事件

<body>
        <h2>javascript 事件</h2>
        <ul>
            <li>aaaa</li>
            <li>aaaa111</li>
            <li>aaaa222</li>
            <li>aaaa3333</li>
            <li>aaaa444</li>            
        </ul>
        <script type="text/javascript">
            //获取所有li的节点
            var list =  document.getElementsByTagName("li");
            //给每个li绑定事件
            for(var i = 0;i<list.length;i++){
                list[i].ondblclick = function(){
                    //弹出对应的li节点里面的内容
                    alert(this.innerHTML);
                    this.style.color = "red";

                }

            }
        </script>
    </body>

这里写图片描述

2.单击事件

<body>
        <h2>javascript 事件</h2>
        <ul>
            <li>aaaa</li>
            <li>aaaa111</li>
            <li>aaaa222</li>
            <li>aaaa3333</li>
            <li>aaaa444</li>            
        </ul>
        <script type="text/javascript">
            //获取所有li的节点
            var list =  document.getElementsByTagName("li");
            //给每个li绑定事件
            for(var i = 0;i<list.length;i++){
                list[i].onclick = function(){
                    //弹出对应的li节点里面的内容
                    alert(this.innerHTML);
                    //将节点的颜色变成红色
                    this.style.color = "red";

                }

            }
        </script>
    </body>