前端面试手撕编程之HTML+CSS

1. 给"ul"标签添加点击事件
2. 当点击某"li"标签时，该标签内容拼接"."符号。如：某"li"标签被点击时，该标签内容为".."
注意：
1. 必须使用DOM0级标准事件（onclick）

target表示当前触发事件的元素
currentTarget是绑定处理函数的元素
只有当事件处理函数绑定在自身的时候，target才会和currentTarget一样

<ul>
      <li>.</li>
      <li>.</li>
      <li>.</li>
</ul>

<script type="text/javascript">
            document.querySelector('ul').onclick=event=>{
                event.target.innerText+='.'
            }
</script>

好处：子元素增不用绑定，删不用解绑

缺点：不支持不冒泡的事件、层级过多可能会被阻止

DOM事件级别

DOM0：onclick属性

DOM2：`addEventListener('click', handler)`

点击事件（Click Event）:
- DOM0级: 通过给元素的onclick属性分配JavaScript函数来定义点击事件的处理程序。
- DOM2级: 引入了更强大的事件模型，可以使用addEventListener方法来添加事件处理程序，如：element.addEventListener('click', handler)。
键盘事件（Keyboard Events）:
- DOM0级: 使用onkeydown, onkeyup等属性来定义键盘事件的处理程序。
- DOM2级: 可以使用addEventListener来监听键盘事件，如：element.addEventListener('keydown', handler)。
鼠标事件（Mouse Events）:
- DOM0级: 使用onmousedown, onmouseup, onmousemove等属性来定义鼠标事件的处理程序。
- DOM2级: 可以使用addEventListener来监听鼠标事件，如：element.addEventListener('mousemove', handler)。
事件捕获和事件冒泡（Event Capturing and Bubbling）:
- DOM2级: 引入了事件捕获和事件冒泡机制，允许开发人员在事件传播的不同阶段注册处理程序。通过addEventListener的第三个参数来控制捕获和冒泡，例如：element.addEventListener('click', handler, true)（捕获阶段）或element.addEventListener('click', handler, false)（冒泡阶段）。

阻止事件

event.stopPropagation()：阻止DOM树上的传播（捕获/冒泡）

<div id="parent">
  <button id="myButton">Click me</button>
</div>

<script>
const parent = document.getElementById('parent');
const button = document.getElementById('myButton');

parent.addEventListener('click', function(event) {
  console.log('Parent handler');
});

button.addEventListener('click', function(event) {
  console.log('Button handler');
  event.stopPropagation();
});
</script>

event.stopImmediatePropagation()：同一个元素+同事件

如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。

如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。

<button id="myButton">Click me</button>

<script>
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('First handler');
  event.stopImmediatePropagation();
});

button.addEventListener('click', function(event) {
  console.log('Second handler');
});

button.addEventListener('click', function(event) {
  console.log('Third handler');
});
</script>

event.preventDefault()：默认行为（链接的跳转、表单的提交）

<a id="myLink" href="https://www.example.com">Click me</a>

<script>
const link = document.getElementById('myLink');

link.addEventListener('click', function(event) {
  console.log('Link clicked');
  event.preventDefault(); // 阻止链接的跳转
});
</script>

设计模式

发布订阅模式（class）：中心化管理

完成"EventEmitter"类实现发布订阅模式。
1. 同一名称事件可能有多个不同的执行函数：构造函数中创建”events“对象变量存放所有的事件
2. 通过"on"函数添加事件：订阅事件。当总事件中不存在此事件时创建新的事件数组，当存在时将”fn“函数添加在该事件对应数组中
3. 通过"emit"函数触发事件：发布事件，遍历该事件下的函数数组并全部执行

class EventEmitter {
    constructor() {
        this.events = {}//二维，events' funcs
    }
    //添加事件：订阅事件
    on(event, fn) {
        if(!this.events[event]) {//当总事件中不存在此事件时创建新的事件数组
            this.events[event] = [fn]
        } else {                 //当存在时将”fn“函数添加在该事件对应数组中
            this.events[event].push(fn)
        }
    }
   //触发事件：发布事件
    emit(event) {
        if(this.events[event]) {//遍历该事件下的函数数组并全部执行
            this.events[event].forEach(callback => callback())
        }
    }
}

观察者模式（class）：发布订阅模式的子类

Redux 和 Vuex 状态管理库是观察者模式

"Observerd"类实现观察者模式。要求如下：
"Observer"为观察者，"Observerd"为被观察者

被观察者构造函数声明三个属性分别为"name"用于保存被观察者姓名、"state"用于保存被观察者状态、"observers"用于保存观察者们
被观察者创建"setObserver"函数，用于保存观察者们，该函数通过数组的push函数将观察者参数传入"observers"数组中
被观察者创建"setState"函数，设置该观察者"state"并且通知所有观察者，该函数首先通过参数修改被观察者的"state"属性，然后通过遍历"observers"数组分别调用各个观察者的"update"函数并且将该被观察者作为参数传入
观察者创建"update"函数，用于被观察者进行消息通知，该函数需要打印（console.log）数据，数据格式为：小明正在走路。其中"小明"为被观察者的"name"属性，"走路"为被观察者的"state"属性

//被观察者
class Observerd {
    constructor(name) {
        this.name = name
        this.state = '走路'
        this.observers = []
    }
    setObserver(observer) {
        this.observers.push(observer)
    }
    setState(state) {
        this.state = state
        this.observers.forEach(observer => observer.update(this))
    }
}
//观察者
class Observer {
    constructor() {
        
    }
    update(observerd) {
        console.log(observerd.name + '正在' + observerd.state)
    }
}

CSS

梯形，三角形，扇形，圆形，半圆

/* HTML CODE: 
    <div class="square">正方形</div>
    */
    
    /* CSS CODE */
   .square {
      width: 100px;
      height: 100px;
      border-top: 50px solid red;<!--solid: 定义实线边框-->
      border-right: 50px solid green;
      border-bottom: 50px solid orangered;
      border-left: 50px solid blue;
    }

关键：

border: 50px solid transparent;

border-color设置为【透明】

border-radius: 50%;

从左上角顺时针到左下角

border-radius: 15px 50px 30px：第一个值适用于左上角，第二个值适用于右上角和左下角，第三个值适用于右下角：

border-radius: 15px 50px：第一个值适用于左上角和右下角，第二个值适用于右上角和左下角

margin:10px 5px 15px;
- 上边距是 10px
- 右边距和左边距是 5px
- 下边距是 15px
margin:10px 5px;
- 上边距和下边距是 10px
- 右边距和左边距是 5px

半圆：border-top-left/right-radius: 50px;

详情：

CSS实现各种图形 -- 梯形，三角形，扇形，圆形，半圆 - 掘金

溢出转省略

单行多行：隐藏overflow: hidden;

单行：不换行white-space:nowrap、省略text-overflow:ellipsis

元素内的空白处理方法：white-space:nowrap; 文本不进行换行；默认值normal

overflow: hidden;
text-overflow:ellipsis;  //ellipsis;省略
white-space: nowrap;  //nowrap 不换行

多行：弹性伸缩盒display: -webkit-box、-webkit-box-orient方向、-webkit-line-clamp行数

1.-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2.display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
3.-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

IE不兼容

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
.text2{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}
</style> 
	
</head>
<body>

<div class="text2">
    这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
    这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
    这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话这是一句话
</div>

</body>
</html>