Event

リンクをクリックすると、 console.logに各イベントのパラメータを表示します。

HTML

1.html

<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ1</p>
    <p>
      <a href="./2.html">ページ2を表示</a>
    </p>
  </div>
</div>

2.html

<div id="barba-wrapper">
  <div class="barba-container">
    <p>ページ2</p>
    <p>
      <a href="./1.html">ページ1を表示</a>
    </p>
  </div>
</div>

JavaScript

Barba.Pjax.start();
Barba.Dispatcher.on('linkClicked', function(htmlElement, mouseEvent) {
  console.log("linkClicked");
  console.log(htmlElement);
  console.log(mouseEvent);
  console.log("--------------------");
});

Barba.Dispatcher.on('initStateChange', function(currentStatus) {
  console.log("initStateChange");
  console.log(currentStatus);
  console.log("--------------------");
});

Barba.Dispatcher.on('newPageReady', function(currentStatus, prevStatus, container, newPageRawHTML) {
  console.log("newPageReady");
  console.log(currentStatus);
  console.log(prevStatus);
  console.log(container);
  console.log(newPageRawHTML);
  console.log("--------------------");
});

Barba.Dispatcher.on('transitionCompleted', function(currentStatus, prevStatus) {
  console.log("transitionCompleted");
  console.log(currentStatus);
  console.log(prevStatus);
  console.log("--------------------");
});