本文已参与「新人创作礼」活动，一起开启掘金创作之路。
前言
今天的知识点多多，大家认真学习并练习呦，本篇文章也是最后一篇介绍 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> -
深拷贝效果如下，可见只是 targetObj 对象的属性值变了。
结尾
如果此篇文章帮助到了你，博主非常开心，也希望可以点赞鼓励一下博主，感谢阅读。
