JavaScript日常使用记录

记录一下日常开发、学习中使用到的JS方法(理解可能不到位)

📌DOM操作

📘closest

从当前元素开始，向上遍历其自身及所有祖先元素，直到找到第一个匹配指定 CSS选择器 的元素。如果遍历完所有元素都没有找到匹配的，该方法将返回null。

element.closest(selectorString);

例

假设有如下 HTML 结构：

<div class="parent">
 
    <div class="child" id="myElement">
 
        <button id="btn">点击我</button>
 
    </div>
 
</div>

通过 JavaScript 代码来使用 closest 方法：

const btn = document.getElementById('btn');
 
// 查找最近的class为child的祖先元素
 
const closestDiv = btn.closest('.child');
 
console.log(closestDiv);

这里按钮元素通过 closest('.child') 找到了最近的 class 为 child 的父级元素，并将其打印出来。

📘matches

遍历自身是否能匹配指定 CSS选择器 ，如果匹配成功返回 true ，否则 false 。

element.matches(selectorString);

例

事件委托

<div id="wrap">
        <a class="btn" href="http://www.baidu.com">点击连接</a>
        <span class="btn">不可点击按钮</span>
 </div>

通过 JavaScript 代码来使用 matches 方法：

  document.querySelector('#wrap').addEventListener('click', function (e) {
        if (e.target.matches('a.btn')) {
           console.log('a.btn');   
        }
    }, false);//false 冒泡阶段 true 捕获阶段


//拦截 （冒泡阶段：避免父元素响应 捕获阶段：彻底阻止事件	）
//e.stopImmediatePropagation();
//e.preventDefault();

⚡addEventListener

用于绑定事件监听器，当指定事件发生在指定元素上时，该函数会被调用。

addEventListener(type, listener, useCapture);

参数：

type：事件类型。
listener：回调函数。
useCapture：事件是在冒泡阶段（false 默认）还是捕获阶段（true）触发。
捕获阶段：事件从外向内传播，在到达目标元素前触发。
目标阶段：事件到达实际触发的元素。
冒泡阶段：事件从目标元素向外传播，在目标阶段之后触发。

补充：

可以拦截事件：

document.addEventListener('click', (e) => {
  if (e.target.matches('.test')) {

    e.stopPropagation(); // 在捕获阶段拦截，事件不会到达目标
    e.stopImmediatePropagation();//阻止当前元素上 同一事件类型 的其他监听器执行
    e.preventDefault();//阻止默认行为（如跳转），不阻止事件传播

  }
}, true); // 第三个参数 true 表示捕获阶段

测试

Tim's Blog