乐趣区

关于javascript:JavaScript-事件

事件流 形容的是从页面接管事件的程序。比如说单击了某个按钮,然而单击事件不仅产生在按钮上,在单击按钮的同时,也单击了按钮的容器元素,甚至是 \<body\>、\<html\>、Document。

事件流传的程序不同导致存在两种事件流机制:事件冒泡 捕捉

事件冒泡

IE 提出的事件流被称作 事件冒泡(event bubbling),即事件开始时由最具体的元素(DOM 层级最深的 node)接管,而后逐级向上流传,直至 document:

事件捕捉

Netscape Communicator(网景)提出的事件流被称作 事件捕捉(event capturing)。与冒泡相同,捕获在事件达到预约指标(即 DOM 层级最深的 node)之前捕捉,document 对象首先被触发事件,而后沿 DOM 树逐级向下流传,直至理论指标:

DOM 事件流

晚期浏览器兼容性的问题导致了 Netscape 只应用事件捕捉,IE 只应用事件冒泡,起初 W3C 标准了这些行为,保留了两种机制。

DOM2 Events 标准规定了事件流分为 3 个阶段:事件捕捉、达到指标和事件冒泡。事件捕捉最先产生,其次是指标元素接管到事件,最初阶段是冒泡。

事件流的抉择

默认状况下所有事件处理程序(响应某个事件的函数)都是在冒泡阶段注册的,这在大多数状况下更有意义。当然也能够通过 addEventListener 办法应用捕捉事件流。

addEventListener 语法:

addEventListener(type, listener);
addEventListener(type, listener, options);
addEventListener(type, listener, useCapture);

第 3 个参数:

  • options

    • capture 布尔值
    • once
    • passive
    • signal
  • useCapture 布尔值

capture 和 useCapture 决定了事件程序,也就是事件流。当布尔值为 true 时,示意应用事件捕捉机制,当为 false 时,则应用事件冒泡机制。该属性默认为 false。

退出移动版