三道选择
1、选择点击按钮之后控制台打印的结果
知识点:事件捕获和冒泡。
事件传播顺序:外层捕获 => 内层捕获 => 内层冒泡 =>外层冒泡
addEventListener方法:可以增加第三个参数,默认值是false,表示在事件冒泡阶段调用事件处理函数。如果更改为true,则表示在事件捕获阶段调用处理函数。
//事件监听器默认监视冒泡行为
button.addEventListener(' ', () => {} , false/true)
stopPropagation()可以阻止事件沿着DOM树向上或向下传播。
而一个dom元素的事件执行顺序由绑定顺序决定,例如:
button.onclick = function () {
console.log("1");
};
button.addEventListener('click' , () => {
console.log("2");
})
//12
因此本题题解思路为:
先寻找捕获期间执行的函数:
button.addEventListener('click', (e) => {
console.log("4.button");
}, true);
container.addEventListener('click' ,(e) => {
console.log("2.container");
},true)
因为捕获是从外往里的,因此打印结果为:
2.container => 4.button
再看冒泡期间的执行函数:
//不执行
button.onclick = function (e) {
e.stopPropagation();
console.log('1.button')
}
button.onclick = function () {
console.log('2.button');
}
container.onclick = function () {
console.log('1.container') //被button的e.stopPropagation()阻止了
}
button.addEventListener('click', (e) => {
console.log('3.button');
e.stopPropagation();
}, false)
首先onclick会覆盖,因此只执行第二个onclick
冒泡从里向外,从button开始,按照事件绑定顺序来说,现在打印的结果为
2.container => 4.button => 2.button =>3.container //为题解
2、考察三元运算符、运算符执行顺序和字符串、数字类型转换
首先明白一点:
|| 或运算符,首先看左边是否是真值,如果是真值就不再计算右边的值。如果是假值再计算右边的表达式,并返回右边表达式的值
&& 和运算符,首先看左边是否是假值,就不再计算第二个表达式。
|| 和 &&都被称为短路运算符。
以及:
任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
let num = 0;
const message = '10' + num; //100
const message1 = '10' + '10'; //1010
const message2 = '10' + NaN; // 10NaN
const message3 = '10' + []; //10
const message4 = '10' + {}; //10[object,object]
3、css 选择器的优先级
内联样式 :1000 > id:100 > class: 10 > 类型(div) : 1 > 通配符选择器: 0
当权值相等时,后定义的样式表优先于之前定义的;
在同一组属性设置中表有**“!important"**规则的优先级最大;
后代选择器 .container div => 包含所有包裹的元素
子选择器 .container >div => 仅指代第一代子元素
相邻兄弟选择器 .container + div => 两者有相同的父元素,选择的是紧邻着contain后面的一个元素
普通兄弟选择器 .container ~div => 有相同的父元素,选择的是紧邻着后面的所有子元素
并集选择器:h1, h2, h3{ }
交集选择器:<p.cls => <p class = "cls"> </p>
伪类选择器:用来表示定位元素的某种状态所显示的样式:button:hover { }
否定伪类选择器:p:not(.fancy) { color: green; }
伪元素选择器:是添加到选择器的关键字,可用于设置所选元素的特定部分的样式。
.p1::first-line { color: lightcoral; };
::before :创建一个伪元素,该元素是所选元素的第一个子元素。
::after:创建一个伪元素,该元素是所选元素的最后一个子元素。
三道代码
1、api相关,忘记记录了= =
2、css九宫格
3、去除数组或者对象中的假值
..(本人总感觉还有可以优化的空间,欢迎讨论
const obj1 = [null, 0, false, 1];
const obj2 = { "a": null, "b": [false, 1] };
const obj3 = [null, 0, 5, [0], [false, 16]];
const obj4 = { "a": true, "b": [false, 1] };
var f1 = function hh(obj) {
if (obj instanceof Array) {
let newArray = [];
for (i = 0; i < obj.length; i++) {
if (obj[i]) {
if (obj[i] instanceof Array) {
let arr1 = [];
const arr2 = obj[i];
for (j = 0; j < arr2.length; j++) {
if (arr2[j]) {
arr1.push(arr2[j]);
}
}
newArray.push(arr1);
// console.log(newArray);
} else {
newArray.push(obj[i]);
}
}
}
console.log(newArray);
} else {
let newObject = {};
for (let key in obj) {
if (obj[key] instanceof Array ) {
const arr3 = obj[key];
let arr4 = [];
for(i = 0; i < arr3.length; i++) {
if(arr3[i]) {
arr4.push(arr3[i]);
}
}
obj[key] = arr4;
Object.assign(newObject, {[key] : obj[key]})
} else if (obj[key]) {
Object.assign(newObject, {[key] : obj[key]});
}
}
console.log(newObject);
}
}
f1()