# 2023-01-10

### 01 触发自定义事件

```javascript
window.addEventListener('resize', function () {
  console.log('当前页面缩放比例应该是：' + Math.round(1000 * (outerWidth / innerWidth)) / 10 + '%')
})
window.dispatchEvent(new CustomEvent('resize'))
```

### 02 判断奇偶

```javascript
n & 1 // 和 n % 2 结果一致，偶数返回 0，奇数返回 1
```

### 03 substr 与 substring 的区别

定义：

* substr(start,length) 第一个字符的索引是 0，start 必选，length 可选
* substring(start,end) 第一个字符的索引是 0，start 必选，end 可选

异同：

* 相同点：当有一个参数时，两者的功能是一样的，返回从 start 指定的位置直到字符串结束的子串
* 不同点：有两个参数时，
  * substr(start,length) 返回从 start 位置开始 length 长度的子串
  * substring(start,end) 返回从 start 位置开始到 end 位置的子串（不包含 end）

### 04 [模拟微信对话的对称布局](https://demo.cssworld.cn/new/3/2-3.php)

```html
<section class="msg-item">
  <img class="msg-avator" alt="武元润香" src="../images/bg-1.jpg" />
  <div class="msg-info">
    <span class="msg-user">武元润香</span>
    <div class="msg-txt">
      <p>没问题哟~</p>
    </div>
  </div>
</section>
<section class="msg-item" data-self>
  <img class="msg-avator" alt="唯我成幸" src="../images/bg-2.jpg" />
  <div class="msg-info">
    <span class="msg-user">唯我成幸</span>
    <div class="msg-txt">
      <p>大家有什么想要了解的吗？</p>
    </div>
  </div>
</section>
```

```css
/* 设置direction:rtl，则水平文档流方向就是从右往左 */
.msg-item[data-self] {
  direction: rtl;
}
```

### 05 事件对象 currentTarget 属性

* event.target 表示点击的元素
* event.currentTarget 表示绑定事件的元素