[插件封装]事件委派实现留言板案例

最新推荐文章于 2023-03-08 22:19:59 发布

Byte_Dance

最新推荐文章于 2023-03-08 22:19:59 发布

阅读量232

点赞数

分类专栏： Jquery

Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件委派实现留言板案例</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <style>
        #message{
            width: 600px;
            min-height:300px;   /*最小高度为300px*/
            overflow: hidden;
            background: #f4f4f4;
        }
        .in{
            background: #f6ffae;
            margin-top: 10px;
        }
        textarea:focus{
            /*获取焦点的时候把轮廓去掉*/
            outline:none;
        }
        textarea{
            resize: none;   /*禁止放大缩小*/
            width: 600px;
            height: 200px;
            border:2px solid black;
            font-size: 30px;
        }
        /*删除号 X 标签*/
        .close{
            float: right;
            cursor: pointer;
            display:none;
        }
    </style>
</head>
<body>

<textarea> </textarea> <br>
<button id="cl">评论</button>
<button id="del">删除</button> <br><br>
<div id="message"></div>

<script>
    /**
     ive(type, [data], fn)  jQuery 给所有匹配的元素附加一个事件处理函数，即使
                这个元素是以后再添加进来的也有效。
     die([type], [fn])      此方法与live正好完全相反。如果不带参数，则所有
                绑定的live事件都会被移除。
     */
        //点击评论就生成一个标签插入到元素内
    $("#cl").click(function(){
        va = $("textarea").val();
        if(va != 0){
            str = "<div class='in'> "+va+"<div class='close'>&times</div>"+"</div>";
            $("#message").append(str);
        }else{
            alert("您输入的内容为空!");
        }
    });
    
    $("#del").toggle(
            function(){
                $(".close").show();
                $(this).css({"background":"#b3c2c5"});
            },
            function(){
                $(".close").hide();
                $(this).css({"background":""});
            }
    );

    //再次获取输入焦点就清空内部数据
    $("textarea").focus(function(){
        $(this).val("");
    });

    // X 号一点击,就删除掉相对应的留言,使用时间委派绑定
    /*打个比方: 绑定事件的时候元素还没有生成,所以元素生成后根本没有相应的事件,
    这个时候就需要使用事件委托来动态给元素绑定事件*/
    $(".close").live("click",function(){
        $(this).parent().hide(500); //删除的时候加上事件会生成动态效果
    })

</script>
</body>
</html>

Byte_Dance

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[插件封装]事件委派实现留言板案例

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;事件委派实现留言板案例&lt;/title&gt; &lt;!--百度在线压缩地址--&gt; &lt;script s
复制链接

扫一扫

专栏目录