Alice-Ti

Appearance

事件 ​

L0 和 L2 事件的区别 ​

传统on注册（L0）

  • 同一个对象，后面注册的时间会覆盖前面注册的事件（同一个事件）
  • 直接使用 null 覆盖就可以实现事件的解绑
  • 都是 冒泡阶段 执行

事件监听注册（L2）

  • 语法：addEventListener(事件类型，事件处理函数，是否使用捕获)
  • 后面注册的时间不会覆盖前面注册的事件（同一个事件）
  • 可以通过第三个参数决定是在冒泡或者捕获阶段执行
  • 必须使用 removeEventListener (事件类型，事件处理函数，冒泡或捕获阶段)
  • 匿名函数 无法解绑

事件对象 ​

有时候在事件处理函数内部，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。

javascript
function handleClick(e) {
  console.log(e);
}

btn.addEventListener('click', handleClick);

事件冒泡及捕获 ​

当一个事件发生在具有父元素的元素上时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。

在捕获阶段：

  • 浏览器检查元素的最外层祖先<html>，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。
  • 然后，它移动到<html>中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。

在冒泡阶段，恰恰相反：

  • 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它
  • 然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达<html>元素。
事件捕获与事件冒泡

阻止冒泡/捕获 ​

event.stopPropagation() ​

调用 event.stopPropagation()只会阻止传播链中后续的回调函数被触发。它不会阻止浏览器的自身的行为。

如果你希望阻止当前节点上的其他回调函数被调用的话，你可以使用更激进的 event.stopImmediatePropagation()方法。

IE中使用e.cancelBubble = true

javascript
function showAlert(event) {
    alert("您点击了");
    event.stopPropagation();
}
const btn = document.querySelector("#btn");
btn.addEventListener("click", showAlert);

阻止默认行为 ​

event.preventDefault() ​

如果事件是可取消的，则 preventDefault() 方法会取消该事件，这意味着属于该事件的默认操作将不会发生。

javascript
btn.addEventListener("click", function(event){
   event.preventDefault()
})

return false ​

在L0事件中，Javascript的return false只会阻止默认行为

javascript
btn.onclick = function() {
 return false;
}