---
title: NotificationEvent
slug: Web/API/NotificationEvent
translation_of: Web/API/NotificationEvent
---
<p>{{APIRef("Web Notifications")}}</p>

<p>传递给 {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}} 处理程序的参数的<code>NotificationEvent</code>接口，该接口表示通知单击事件，该事件在 {{domxref("ServiceWorkerGlobalScope")}} ，{{domxref("ServiceWorker")}} 。</p>

<p>该接口继承自{{domxref("ExtendableEvent")}}接口。</p>

<h2 id="建设者">建设者</h2>

<dl>
 <dt>{{domxref("NotificationEvent.NotificationEvent","NotificationEvent()")}}</dt>
 <dd>创建一个新<code>NotificationEvent</code>对象。</dd>
</dl>

<h2 id="物产">物产</h2>

<p><em>从其祖先{{domxref("Event")}}继承属性</em>。</p>

<dl>
 <dt>{{domxref("NotificationEvent.notification")}} {{readonlyInline}}</dt>
 <dd>返回一个{{domxref("Notification")}}对象，该对象表示单击以触发事件的通知。</dd>
 <dt>{{domxref("NotificationEvent.action")}} {{readonlyinline}}</dt>
 <dd>返回用户单击的通知按钮的字符串ID。如果用户在除操作按钮之外的其他位置单击了通知，或者该通知没有按钮，则此值返回一个空字符串。</dd>
</dl>

<h2 id="方法">方法</h2>

<p><em>从其父项</em><em>{{domxref("ExtendableEvent")}}</em><em>继承方法</em>。</p>

<dl>
 <dt>{{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}}</dt>
 <dd>
 <p>延长事件的寿命。告诉浏览器工作正在进行中。</p>
 </dd>
</dl>

<h2 id="例">例</h2>

<pre class="brush: js notranslate">self.addEventListener('notificationclick', function(event) {
  console.log('On notification click: ', event.notification.tag);
  event.notification.close();

  // This looks to see if the current is already open and
  // focuses if it is
  event.waitUntil(clients.matchAll({
    type: "window"
  }).then(function(clientList) {
    for (var i = 0; i &lt; clientList.length; i++) {
      var client = clientList[i];
      if (client.url == '/' &amp;&amp; 'focus' in client)
        return client.focus();
    }
    if (clients.openWindow)
      return clients.openWindow('/');
  }));
});
</pre>

<h2 id="技术指标">技术指标</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">评论</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('Web Notifications','#notificationevent','NotificationEvent')}}</td>
   <td>{{Spec2('Web Notifications')}}</td>
   <td>生活水平。</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>注意</strong>：此接口在<a href="/en-US/docs/Web/API/Notifications_API">Notifications API中</a>指定，但是可以通过 {{domxref("ServiceWorkerGlobalScope")}}访问。</p>
</div>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div>
<p>{{Compat("api.NotificationEvent")}}</p>
</div>