jQuery事件对象

最新推荐文章于 2024-04-07 10:28:17 发布

靠技术吃饭

最新推荐文章于 2024-04-07 10:28:17 发布

阅读量1.2k

点赞数 14

分类专栏： JavaScript jQuery DOM 文章标签： javascript jquery ecmascript 开发语言前端

本文链接：https://blog.csdn.net/weixin_58131487/article/details/121604627

版权

JavaScript 同时被 3 个专栏收录

29 篇文章 6 订阅

订阅专栏

DOM

14 篇文章 1 订阅

订阅专栏

jQuery

6 篇文章 1 订阅

订阅专栏

都说程序员最不缺的就是对象，今天我们来一探究竟如何？？

一、jQuery 事件对象

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

语法：

演示代码 ：

<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 。

二、jQuery 拷贝对象

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

演示代码 ：

 <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>

三、jQuery 多库共存

实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为，jQuery 多库共存。

演示代码 ：

<script>
	$(function() {
  		// 让jquery 释放对$ 控制权 让用自己决定
  		var suibian = jQuery.noConflict();
  		console.log(suibian("span"));
	})
</script>

四、今日总结

靠技术吃饭

关注

14
点赞
踩
4

收藏

觉得还不错? 一键收藏
21
评论
jQuery事件对象

一、jQuery 事件对象jQuery 对DOM中的事件对象 event 进行了封装，兼容性更好，获取更方便，使用变化不大。事件被触发，就会有事件对象的产生。语法：演示代码：<body> <div></div> <script> $(function() { $(document).on("click", function() { consol...
复制链接

扫一扫

专栏目录