首页 > 其他分享 >20230829-给ui下面的li绑定事件

20230829-给ui下面的li绑定事件

时间:2023-09-02 10:37:39浏览次数:53  
标签:20230829 case console log li break ui target


给ui下面的li绑定事件

# 给下面的每个li绑定点击事件 点击打印的结果分别是 1 2 3(提示:事件委托)

<ul>
   <li>1<li>
   <li>2<li>
   <li>3<li>
</ul>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li id="first">1</li>
        <li id="second">2</li>
        <li id="third">3</li>

    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.addEventListener('click', function (e) {
            var target = e.target;
            switch (target.id) {
                case 'first':
                    console.log(1);
                    break;
                case 'second':
                    console.log(2);
                    break;
                case 'third':
                    console.log(3);
                    break;
            }
        })
    </script>
</body>

</html>

运行结果

20230829-给ui下面的li绑定事件_javascript


标签:20230829,case,console,log,li,break,ui,target
From: https://blog.51cto.com/u_15460007/7330759

相关文章

  • 20230829-面试题html+css5道题记录
    css预处理工具参考答案:CSS预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。css预处理器种类繁多,三种主流css预处理器是Less、Sass(Scss)及Stylus;它们各自的背景如下:Sass:2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框......
  • 前端项目实战叁佰肆拾叁react-admin和material ui-设置两栏布局
    <Gridstyle={{margin:0,padding:0,display:"flex"}}><Gridstyle={{width:"70px",margin:"12px0012px"}}>{typeList&&typeList.map((item:any,index:any)=......
  • 前端项目实战叁佰肆拾贰react-admin和material ui-设置默认高度样式
    {typeList&&typeList.map((item:any,index:any)=>(<Paper><ListMcomponent="div"><ListItembuttonstyle={typeId==item.id?{b......
  • 前端项目实战叁佰肆拾肆react-admin和material ui-设置布局最小高度
    constappLayout=(props:LayoutProps)=>{return(<Layoutsx={{'&.RaLayout-appFrame':{minHeight:'100%',height:'100%',margin:0,......
  • Oracle - dblink 数据库之间的连接
    介绍dblink数据库链接顾名思义就是数据库的链接,就像电话线一样,是一个通道,当我们要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中就必须要创建远程数据库的dblink,通过dblink本地数据库可以像访问本地数据库一样访问远程数据库表中的数据。创建dblink--查询是否......
  • 用友致远U8-OA getSessionList jsp信息泄露复现
    1.漏洞描述用友U8-OAgetSessionList.jsp存在漏洞,攻击者通过该漏洞可以获取到所有用户的sessionID,利用获取到的sessionID即可登录到系统。2.网络测绘fofa:"用友U8-OA"3.漏洞复现1.登录页面2.验证POC/yyoa/ext/https/getSessionList.jsp?cmd=getAll3.将其拼......
  • 东方博宜OJ1000 熟悉一下Online Judge的环境 C语言版
    题目描述请不要笑。用来适应环境的题目,自然比较简单些。计算 22个整数的和,这两个整数都在 11到 100之间。输入输入只有一行,包括 22 个整数 a , b ,之间用一个空格分开。输出输出只有一行,包括 11 个整数。样例输入12输出3说明使用O......
  • angular - HttpClient
    入门引入HttpClientModule模块//app.module.tsimport{HttpClientModule}from'@angular/common/http';@NgModule({imports:[HttpClientModule],})注入服务实例import{HttpClient}from'@angular/common/http';exportclassAppC......
  • TCP KEEPALIVE以获得更好的POSTGRESQL体验进程
    如果您听说过TCPkeepalive但不确定它是什么,请继续阅读。如果您曾经对以下错误消息感到惊讶:serverclosedtheconnectionunexpectedlySSLSYSCALLerror:EOFdetectedunexpectedEOFonclientconnectioncouldnotreceivedatafromclient:Connectionresetbypeer......
  • 在linux上部署lavavel项目提示log目录没权限的问题
    Thestreamorfile"/data/www/laravel/storage/logs/laravel.log"couldnotbeopened:failedtoopenstream:PermissiondenieWeb服务器用户和组依赖于你的Web服务器和操作系统。找出你的Web服务器用户和组使用以下命令的内容。对于nginx使用: ......