<style>
div{padding: 50px}
#div1{background-color: red}
#div2{background-color: blue}
#div3{background-color: orange}
</style>
<script>
/*
浏览器上事件天生的一个特点:事件流
事件冒泡:由里向外逐级触发。
事件捕获:由外向里逐级触发。
阻止事件冒泡:浏览器兼容问题
事件对象的属性和方法:
cancelBubble=true stopPropagation()
*/
window.onload = function(){
var aDivs = document.getElementsByTagName("div");
for(var i = 0; i < aDivs.length; i++){
aDivs[i].onclick = function(ev){
var e = ev || window.event;
alert(this.id);
// e.cancelBubble = true;
// e.stopPropagation();
stopBubble(e);
}
}
//封装跨浏览器兼容的阻止事件冒泡
function stopBubble(e){
//e 是事件对象
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
}
</script>
<body>
<div id = 'div1'>
<div id = 'div2'>
<div id = 'div3'></div>
</div>
</div>
</body>
/**
* 深拷贝
*/
const obj1 = {
age: 20,
name: 'xxx',
address: {
city: 'beijing'
},
arr: ['a', 'b', 'c']
}
const obj2 = deepClone(obj1)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
// 进行深拷贝后,改变obj2的属性值,都不会影响原来的obj1对应的属性值
console.log(obj1.address.city) //beijing
console.log(obj1.arr[0]) //a
/**
* 深拷贝
* @param {Object} obj 要拷贝的对象
*/
function deepClone(obj = {}) {
if (typeof obj !== 'object' || obj == null) {
// obj 是 null ,或者不是对象和数组,直接返回
return obj
}
// 初始化返回结果
let result
if (obj instanceof Array) {
result = []
} else {
result = {}
}
for (let key in obj) {
// 保证 key 不是原型的属性
if (obj.hasOwnProperty(key)) {
// 重点:递归调用!(让更深层的也进行如上这样)
result[key] = deepClone(obj[key])
}
}
// 返回结果
return result
}