jQuery （事件、拷贝）对象

清出于兰

发布于 2020-10-26 15:48:32

6500

发布于 2020-10-26 15:48:32

文章被收录于专栏：前端学习笔记

1. jQuery 事件对象

jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。

语法

element. on (events, [selector], function(event) {})

阻止默认行为: event.preventDefault0 或者return false 阻止冒泡: event.stopPropagation0

演示代码

<body>
    <div></div>

    <script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                event.stopPropagation();
            })
        })
    </script>
</body>

注意：jQuery中的 event 对象使用，可以借鉴 API 和 DOM 中的 event 。

2. jQuery 拷贝对象

jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。

语法

语法: s.extend ([deep], target, object1, [objectN] )

1. deep:如果设为true为深拷贝，默认为false 浅拷贝 2. target:要拷贝的目标对象 3. object1:待拷贝到第一个对象的对象。 4. objectN:待拷贝到第N个对象的对象。 5.浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。 6.深拷贝，前面加true，完全克隆，修改目标对象不会影响被拷贝对象。

演示代码

 <script>
        $(function() {
            // 1.合并数据
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj);
   
            // 2. 会覆盖 targetObj 里面原来的数据
            var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            // $.extend(target, obj);
            $.extend(targetObj, obj);
            console.log(targetObj); 
        })
    </script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-10-11 ，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery