这两种写法有啥区别吗？

$('.bind').click(function(){
$(document).on('click','.obj',flash);
})
 
$('.bind').click(function(){
$('.obj').on('click',flash);
})

两种写法有啥区别吗

cjq6502 2019-06-06

源自：jQuery事件 6-3 事件绑定与取消-off

收起

2回答

Miss路回答被采纳获得+3积分 2019-06-07 15:14:59

同学，你好。

拿上一条回复中的代码例子为例，当html中目前有p标签的话，也就是上条回复中的代码那样的情况，直接给p添加事件和给父元素委托都是可以的，甚至直接添加会更简单。

但是为什么还要发明委托呢，在实际的工作中，很多元素都是从后台获取的，比如三个p标签，只是里面的内容不同，那么我们就可以通过js循环把p标签渲染到页面中，就不用写三遍p标签了，甚至有的时候你都不知道有几个p标签，那更不能一个一个写了。但是不管这三个p抱歉是通过js追加到div上的，还是直接写在html中的，我们都的给他太那几事件，假如我们直接给p添加事件，这个时候页面中是没有p标签的，所以我们选的话选不到，就会报错，通常这种情况下我们就会用这个事件委托的方式去做，就不会报错了。

如果帮助到了你，欢迎采纳！

祝学习愉快！

收起回答

Miss路 2019-06-07 11:00:11

同学，你好。

on('click','.obj',flash);这种写法中间多了个参数，这个参数是个选择器，表示obj是bind的子元素，这个事件是给子元素添加的，这也叫事件委托，把自己的事件，委托给了父元素。

下面的没有obj选择器的就是给本身添加事件。

举个例子你试一下，不写aa，和写aa的区别，当不写aa的时候，只要点击框中的任何一个地方，都会弹出，写了aa之后，只有点击p标签才会弹出。

<!DOCTYPE html>
<html>
 
<head>
<style type="text/css">
    .p{
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
</style>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function() {
        $(".p").on("click", ".aa",function() {
            alert("okok");
        });
    });
    </script>
</head>
 
<body>
    <div class="p">
        <p class="aa">aaaaa</p>
        <p class="aa">bbbbb</p>
        <p class="aa">ccccc</p>
    </div>
</body>
 
</html>