谈一谈JS事件委托

不念不忘少年蓝@ 2022-10-27 00:30 155阅读 0赞

### 目录 ###

*   *   *  谈一谈事件委托
         *  阻止默认事件和阻止传播
         *  分别解析 offsetX clientX screenX pageX
         *  手写生成\[10,80\]的随机小数
         *  手写生成\[10,80\]的随机整数
         *  生成一个7天以后的现在的时间
         *  常见的H5标签及相应的含义

### 谈一谈事件委托 ###

**事件委托：**

事件就是我们普通绑定的事件。  
委托就是不绑定在当前元素上，而是绑定在了父级或者祖辈元素上，通过event事件对象的target属性，获取当前点击的精确元素。

**原理：** 使用了冒泡的原理。

**优点：**

1.  减少for循环，减少绑定事件数量，减少了内存泄露的概率。
2.  可以给未来的元素绑定事件。

### 阻止默认事件和阻止传播 ###

**阻止默认事件：**  
主流：

1.  `e.preventDefault()`
2.  `IE:e.returnValue = false;`

**阻止传播：**  
主流：

1.  `e.stopPropagation()`
2.  `IE:e.cancelBubble=true`

### 分别解析 offsetX clientX screenX pageX ###

offsetX: 事件发生位置 到 目标元素边缘的距离。

clientX: 事件发生位置 到 浏览器视口边缘的距离。

screenX: 事件发生位置 到 电脑屏幕边缘的距离。

pageX: 事件发生位置 到 文档边缘的距离(ie8不兼容)。

### 手写生成\[10,80\]的随机小数 ###

document.write(Math.random()*70 + 10 + '</br>');
    // 1. 10 + 70 = 80，这是 10~80之间。两数相加一定要等于最大的那个要求的数，这里就是等于80。
    // 2. 10 表示从 10 开始。

### 手写生成\[10,80\]的随机整数 ###

document.write(parseInt(Math.random()*70 + 10 + '</br>'));

### 生成一个7天以后的现在的时间 ###

var date = new Date();
    date.setDate(date.getDate()+7);
    document.write(date);

### 常见的H5标签及相应的含义 ###

1.  header: 用来定义文档（网页或者是某一个段落）的页眉（头部）。
2.  footer: footer标签代表一个网页或者章节内容的底部区域（页脚）。
3.  article: 表文档、页面、或程序中，可以独立的完整的被外部引用的内容。
4.  nav: 表示在当前文档或其他文档中提供导航链接。  
    静态导航：`nav>a`  
    动态导航：`nav>ul>li>a`
5.  section: section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题。
6.  aside: 侧边栏，表示一个和其余页面内容几乎无关的区域。