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

前言

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

一、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()
        })

        $('.box').on('click', function (event) {
   
            console.log()
            // 阻止冒泡
            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>

  • 深拷贝效果如下，可见只是 targetObj 对象的属性值变了。

jQuery 的知识总结就到这里了，感谢一直支持我的小伙伴，后续我们再一起学习 javaScript 语言，感受一下 原生 js 语言的魅力。 😏