玩 fei 了-- ＞ jQuery(五)-CSDN博客

本文链接：https://blog.csdn.net/m0_58040147/article/details/121730167

阳光依然明亮，未来依旧可期

前言
一、`jQuery` 事件注册
二、`jQuery` 事件处理
三、`jQuery` 事件对象
四、`jQuery` 拷贝对象

前言

今天的知识点多多，大家认真学习并练习呦。

一、`jQuery` 事件注册

优点：操作简单，不用担心事件覆盖等问题。
缺点：普通的事件注册不能做事件委托，无法实现事件解绑，需要借助其他方法。

语法

element.事件(function() {})

$('div').click(function() { 事件处理程序 })

学过 javaScript 语言的，常用的事件基本一致，具体可以参考 W3C

演示代码

<body>
    <div></div>

    <script src="./jQuery.js"></script>
    
    <script>
        // 注册单击事件
        $('div').click(function () {
            console.log('单击事件')
        })
    </script>

</body>

二、`jQuery` 事件处理

2.1 事件处理 on() 绑定事件

语法

on() 方法优势一：可以绑定多个事件，多个处理事件处理程序。

<body>
    <div></div>

    <script src="./jQuery.js"></script>
    
    <script>
        // 注册单击事件
        $('div').click(function () {
            console.log('单击事件')
        })
    </script>

</body>

如果事件处理程序相同

<body>
    <div class="box"></div>

    <script src="./jQuery.js"></script>
    
    <script>
        // 事件处理程序相同
        $('.box').on('mouseover mouseout', function () {
            console.log(1)
        })
    </script>

</body>

on() 方法优势二

可以事件委派操作，意思是把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

<body>
    <div class="box">
        <div class="child"></div>
    </div>

    <script src="./jQuery.js"></script>
    
    <script>
        // 事件委派
        $('.box').on('click', '.child', function () {
            console.log(1)
        })
    </script>

</body>

on() 方法优势三

动态创建的元素，click() 没有办法绑定事件，on() 可以给动态生成的元素绑定事件。

<body>
    <div class="box">
        <div class="child"></div>
    </div>

    <script src="./jQuery.js"></script>
    
    <script>
        // 事件委派
        $('.box').on('click', '.child', function () {
            console.log(1)
        })
    </script>

</body>

2.2 事件处理 off() 解绑事件

解绑事件意思是当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除。

语法

off() 方法可以移除通过 on() 方法添加的事件处理程序。

<body>
    <ul>
        <li></li>
    </ul>

    <script src="./jQuery.js"></script>
    
    <script>
        // 解绑 ul 元素所有事件处理程序
        $('ul').off()

        // 解绑 ul 元素上面的点击事件
        $('ul').off('click')

        // 解绑事件委托
        $('ul').off('click', 'li')
    </script>

</body>

如果有的事件只想触发一次，可以使用 one() 来绑定事件。

<body>
    <div class="box">
        <div class="child"></div>
    </div>

    <script src="./jQuery.js"></script>
    
    <script>
        // one() 只能触发事件一次
        $('.box').one('click', function () {
            console.log('只触发一次')
        })
    </script>

</body>

2.3 事件处理 `trigger()` 自动触发事件

jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() 。

语法

trigger() ：会触发元素的默认行为

// 简写形式
element.click()

// 自动触发模式
element.trigger('type')

triggerHandler() ：不会触发元素的默认行为

// 自动触发模式
element.triggerHandler(type)

代码示例

<body>
    <div class="box">
        <div class="child"></div>
    </div>

    <script src="./jQuery.js"></script>
    
    <script>
        // 元素.事件() 会触发元素的默认行为
        $('.box').click() 

        // 元素.trigger('事件') 会触发元素的默认行为
        $('.box').trigger('click')

        // 元素.triggerHandler('事件') 不会触发元素的默认行为
        $('.box').triggerHandler('click')
    </script>

</body>

三、`jQuery` 事件对象

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

语法

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

阻止默认行为：event.preventDefault() 或者 return false。
阻止冒泡：event.stopPropagation() 。

<body>
    <div class="box"></div>

    <script src="./jQuery.js"></script>
    
    <script>
        $(document).on('click', function () {
            console.log('点击了 document')
        })

        $('.box').on('click', function (event) {
            console.log('点击了 box')
            // 阻止冒泡
            event.stopPropagation()
            // 阻止默认行为
            event.preventDefault()
        })
    </script>

</body>

四、`jQuery` 拷贝对象

语法

$.extend([deep], target, object1, [objectN])

参数说明
- deep ：如果设为 true 是深拷贝，默认为 false 是浅拷贝。
- target ：要拷贝的目标对象。
- object1 ：待拷贝到第一个对象的对象。
- objectN ：待拷贝到第 N 个对象的对象。
- 浅拷贝目标对象引用的被拷贝的对象地址，修改目标对象会影响被拷贝对象。
- 深拷贝，前面加 true，完全克隆，修改目标对象不会影响被拷贝对象。

代码示例

浅拷贝

<script>
    // 浅拷贝
    var targetObj = {
        id: 0,
        text: {
            name: 'nb'
        }
    }

    var obj = { 
        id: 1,
        text: {
            name: 'op'
        }
    }
	
    // 浅拷贝
    $.extend(targetObj, obj)
    // 修改 targetObj 对象的属性值
    targetObj.text.name = '666'

    // 控制台输出
    console.log(targetObj, obj)

</script>

浅拷贝效果如下，可见属性值都改变了

深拷贝

<script>
    // 深拷贝
    var targetObj = {
        id: 0,
        text: {
            name: 'nb'
        }
    }
    var obj = { 
        id: 1,
        text: {
            name: 'op'
        }
    }
	
    // 深拷贝
    $.extend(true, targetObj, obj)
    // 修改 targetObj 对象的属性值
    targetObj.text.name = '666'

    // 控制台输出
    console.log(targetObj, obj)

</script>