1.事件对象
语法:element.on(events,[selector],function(event){})
首先,先准备一个盒子,并为他绑定点击事件:
<div></div>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
$(function () {
$('div').on('click', function () {
$(this).css('backgroundColor', 'red');
})
})
</script>
然后,我们打印其事件对象:
$('div').on('click', function (event) {
$(this).css('backgroundColor', 'red');
console.log(event);
})
可以在控制台看到事件对象的各种信息,例如:鼠标点击时的位置等。
阻止默认行为: event.preventDefault | return false
例如:禁止鼠标右键 (结果:鼠标在粉色盒子中无法右键,但在其他区域可以)
$('div').on('contextmenu', function (event) {
event.preventDefault();
})
或者: (结果也是一样的)
$('div').on('contextmenu', function (event) {
return false;
})
阻止冒泡:
比如:我现在有两个盒子,一个大盒子,里面装了一个小盒子:
<div class="big">
<div class="small"></div>
</div>
<style>
.big {
width: 200px;
height: 200px;
background-color: pink;
}
.small {
width: 50px;
height: 50px;
background-color: blue;
}
</style>
我希望,点击小盒子,小盒子变成红色,点击大盒子时,大盒子变成绿色。
<script>
$(function () {
$('.big').on('click', function () {
$(this).css('backgroundColor', 'yellowgreen')
})
$('.small').on('click', function () {
$(this).css('backgroundColor', 'red');
})
})
</script>
但是,当我点击小盒子之后,不仅小盒子会变色,大盒子也会:
这是由于事件冒泡,小盒子的点击事件同时向上一层触发了大盒子的点击事件,此时,我们阻止小盒子的点击事件冒泡。
$('.small').on('click', function (event) {
$(this).css('backgroundColor', 'red');
event.stopPropagation();
})
2.对象拷贝
语法:$.extend([deep],target,object1,[objectN])
- deep : 为true则为深拷贝,为false则为浅拷贝 (不写,默认为浅拷贝)
- target : 要拷贝的目标对象
- object1 : 待拷贝的第一个对象
- 浅拷贝是把被拷贝对象复杂数据类型的地址拷贝给目标对象,修改目标对象是会影响被拷贝对象的
<script>
$(function () {
var obj = {
uname: '小花',
sex: '女',
foodarr: ['苹果', '香蕉', '葡萄']
}
var obj1 = {};
$.extend(obj1, obj);
obj1.foodarr[0] = '西红柿';
console.log(obj);
console.log(obj1);
})
</script>
拷贝后,修改obj1的内容,发现obj的也同时发生变化
我们将拷贝方式换成深拷贝:
$.extend(true,obj1, obj);
obj的内容不会发生变化。