留言板

最新推荐文章于 2022-07-13 14:54:24 发布

湳橙

最新推荐文章于 2022-07-13 14:54:24 发布

阅读量127

点赞数 1

分类专栏：案例文章标签： javascript

本文链接：https://blog.csdn.net/chenlaodacsdn/article/details/107496574

版权

案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

事件委托案例项目需求:

- 1.在id是t的输入框输入留言
- 2. 点击btn按钮
- 3. 生成一个li标签,里面有留言内容和删除按钮,放到ul中
- 4. 点击删除按钮,删除当前的li

技术点:事件委托事件目标
- 事件目标:在事件对象上,有一个属性叫做target记录事件的目标,这个属性有兼容性,在ie使用srcElement.

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
        *{cursor:pointer; margin: 0;padding: 0;}
        .box{
            width: 400px;
            margin:50px auto;
            border:1px solid #ccc;
            padding:20px;
            line-height: 25px;
        }
        span.message{
            float: left;
        }
        span.del{
            float: right;
        }
     
     </style>
 </head>
 <body>
     <div class="box" >
         <input type="text" id="t"/>
         <input type="button" value="请留言" id="btn"/>
         <ul id="con">
             <li><span class="message">content</span>
                <span class='del'>删 除</span>
             </li>
         </ul>
     </div>
     
 </body>
 <script>
    //获取相关元素
    var text =document.querySelector('#t');//留言输入框
    var btn =document.querySelector('#btn');//留言按钮
    var ul =document.querySelector('#con');//留言所在的ul

    //1.在id是t的输入框输入留言，2.点击btn按钮
    btn.onclick = function(){
        //获取留言内容
        var message = text.value;
        //生成一个li
        var li = document.createElement('li');

        //3.生成一个li标签，里面有留言内容和删除按钮，放到ul中
        li.innerHTML ='<span class="message">'+message+'</span><span class="del">删除</sapn>';
            //把li添加到ul里面
            ul.appendChild(li);
            //清空text里面的内容
            text.value = "";
            
        }
    //此处还没有li也没有删除按钮,
        //但是有ul,以后只要你添加到ul里面的li发生的点击事件,都会冒泡到ul上,不管li上面有没有注册点击事件    

        ul.onclick =function(e){
            //获取事件对象
            e =window.event||e;
            //事件目标:在事件对象上,有一个属性叫做target记录事件的目标
            //这个属性有兼容性,在ie使用srcElement

            var target = e.target||e.srcElement;
            //如果是点击的是删除按钮，就删除当前的li
            if(target.className=='del'){
                var currentLi =target.parentNode;
                //删除currentLi
                //父节点.removeChild(子节点)
                ul.removeChild(currentLi)
            }
        }
      
 </script>
 </html>

湳橙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
留言板

事件委托案例项目需求:- 1.在id是t的输入框输入留言- 2. 点击btn按钮- 3. 生成一个li标签,里面有留言内容和删除按钮,放到ul中- 4. 点击删除按钮,删除当前的li技术点:事件委托事件目标事件目标:在事件对象上,有一个属性叫做target记录事件的目标,这个属性有兼容性,在ie使用srcElement. <!DOCTYPE html> <html lang="en"> <head> <meta charse
复制链接

扫一扫

专栏目录