JS阻止事件冒泡行为和闭包的方法

JS阻止事件冒泡行为

在JavaScript中，事件冒泡指的是当子元素触发一个事件时，这个事件将沿着DOM树向它的祖先元素传播，直到被处理或到达文档根。有时候，我们需要阻止事件的冒泡传递，这时可以使用以下两种方法：

1. stopPropagation()方法

stopPropagation()是用来停止事件在DOM层次中进一步传播的方法。当调用stopPropagation()方法时，事件将会被阻止传播，但仍可在当前元素上触发。

<div id="parent">
  <button id="child">Click me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
child.addEventListener('click', (event) => {
  alert('Child clicked');
  event.stopPropagation();
});
parent.addEventListener('click', () => {
  alert('Parent clicked');
});
</script>

在上面的代码中，点击按钮时，会弹出“Child clicked”，但不会弹出“Parent clicked”。

1. 使用事件处理程序的事件对象参数

在事件处理程序中，我们可以通过事件对象来判断事件是否要冒泡。如果事件需要停止冒泡，可以使用事件对象的stopPropagation()方法。

<div id="parent">
  <button id="child">Click me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
child.addEventListener('click', (event) => {
  alert('Child clicked');
  event.stopPropagation();
});
parent.addEventListener('click', (event) => {
  if (!event.isPropagationStopped()) {
    alert('Parent clicked');
  }
});
</script>

在这个例子中，我们在父元素的事件处理程序中，通过event.isPropagationStopped()方法来检查事件是否停止了冒泡。如果没有停止冒泡，才会弹出“Parent clicked”。

闭包

闭包是指有权访问另一个函数作用域内变量的函数。在JavaScript中，函数作用域可以是全局作用域、函数作用域或块级作用域。

使用闭包有以下的好处：

1. 可以访问外部函数的局部变量

2. 可以将函数作为参数传递到另一个函数中

3. 可以将函数作为返回值返回

以下是一个闭包的示例：

function outerFunction() {
  const name = 'David';
  function innerFunction() {
    console.log(name);
  }
  return innerFunction;
}

const inner = outerFunction();
inner(); // 输出'David'

在上面的代码中，innerFunction是一个闭包，内部可以访问外部函数outerFunction中的局部变量name。

另一个闭包的示例是将函数作为参数传递到另一个函数中：

function sayHello(name) {
  return function() {
    console.log(`Hello ${name}`);
  };
}

const sayBob = sayHello('Bob');
const sayAlice = sayHello('Alice');
sayBob(); // 输出'Hello Bob'
sayAlice(); // 输出'Hello Alice'

在这个例子中，sayHello函数返回一个函数，内部可以访问外部函数中的name变量。我们可以将这个函数作为参数传递到另一个函数中，以实现更复杂的操作。

总结

在JavaScript中，使用stopPropagation()方法和事件处理程序的事件对象参数可以阻止事件的冒泡传递。使用闭包可以访问外部函数的局部变量，并将函数作为参数传递到另一个函数中，实现更复杂的操作。