jquery 常规绑定事件click与on委托绑定测试

最新推荐文章于 2023-07-29 14:13:42 发布

xeenwu

最新推荐文章于 2023-07-29 14:13:42 发布

阅读量500

点赞数

分类专栏： html5 js 文章标签： jquery javascript html属性操作事件委托

本文链接：https://blog.csdn.net/qq_24380167/article/details/65651305

版权

js 同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

html5

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ENTRUST</title>
</head>
<body>
<div id="entrust">
<button class="btn_class"> 测试 </button>
    <button class="b_class"> 测试_测试 </button>
<div>
    <button id="btn_id"> 测试1 </button>
    <button id="b_id"> 测试_测试1 </button>
</div>
</div>
<script type="text/javascript" src="jquery/jquery-min.js"></script>
<script>
            $(document).on('click','.btn_class',function(){
                console.log(this.class,"测试——class");
            });
    $('.b_class').click(function () {
      console.log(this.class,"测试——测试-class")
    });
    $('#btn_id').click(function () {
        $("<button class='btn_class'> 测试 </button>").insertAfter('.b_class');
    });
    $('#b_id').click(function () {
        $("<button class='b_class'> 测试_测试 </button>").insertBefore('.btn_class');
    });
</script>
</body>
</html>

单单从形式上来说，on绑定给document，document委托给所有的class=btn_class的按钮，这样即使动态添加的同类名btn，也都会执行on绑定的事件；click绑定的只是class=b_class的btn，在绑定的时候只绑定给已存在的b_class的btn，b_class的click事件不会被新创建的按钮执行。