此jsaction调用哪个功能？

Question

bounty到期在7天内。该问题的答案有资格获得+ 500声望赏金。Norman想要引起更多关注对此问题。

我正在尝试计算google驱动器用来加载其文件夹内容的路径，从双击文件夹名称到加载该文件夹内容的位置。

我注意到Google使用了类似的方法：

<div jsaction="click:cOuCgd; contextmenu:mg9Pef; dblclick:FNFY6c; focus:AHmuwe" jsname="LvFR7c" role="row" tabindex="0" aria-selected="false" aria-disabled="false">

dblclick:FNFY6c是做什么的？ FNFY6c是功能吗？整个程序如何运作？我一直在尝试使用Chromes DevTools来解决此问题，但似乎无法在任何地方找到FNFY6c。

如何确定单击dblclick:FNFY6c时接下来会发生什么？

Answer 1

google/jsaction

[README.md]

JsAction是一个很小的事件委托库，它允许将发生操作的DOM节点与处理该操作的JavaScript代码解耦。

添加事件处理程序的传统方法是获取对该节点的引用并将事件处理程序添加到该节点。 JsAction允许我们通过称为jsaction的自定义HTML属性在事件和这些事件的处理程序名称之间进行映射。

[另外，JavaScript代码使用不需要全局公开的给定名称注册事件处理程序。当事件发生时，操作的名称将映射到执行的相应处理程序。

最后，JsAction将事件处理与实际实现分离。因此，人们可能会延迟加载实现，而应用程序始终能够响应通过JsAction标记的用户操作。这可以帮助大大减少页面加载时间，尤其是对于服务器端呈现的应用程序。

让我们以jsaction为例：

• 点击事件示例，

// Set up

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('click');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const click = function(flow) {
  // do stuff
  alert('click event dispatched!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'clickAction': click
  });

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="container">
  <div id="foo" jsaction="click:leftNav.clickAction">
    some content here
  </div>
</div>

• 双击事件示例，

// Set up

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('dblclick');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const dbClick = function(flow) {
  // do stuff
  alert('double-click event dispatched!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'doubleClickAction': dbClick
  });

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="container">
  <div id="foo" jsaction="dblclick:leftNav.doubleClickAction">
    some content here
  </div>
</div>

• 最后，让我们看看如何附加多个事件，

// Set up

const eventContract = new jsaction.EventContract();

// Events will be handled for all elements under this container.
eventContract.addContainer(document.getElementById('container'));

// Register the event types we care about.
eventContract.addEvent('click');
eventContract.addEvent('mouseover');
eventContract.addEvent('mouseout');

const dispatcher = new jsaction.Dispatcher();
eventContract.dispatchTo(dispatcher.dispatch.bind(dispatcher));

// Register individual handlers

const click = function(flow) {
  // do stuff
  console.log('click called!');
};

const mouseOver = function(flow) {
  // do stuff
  console.log('mouseover called!');
};

const mouseOut = function(flow) {
  // do stuff
  console.log('mouseout called!');
};

dispatcher.registerHandlers(
  'leftNav', // the namespace
  null, // handler object
  { // action map
    'clickAction': click,
    'mouseOverAction': mouseOver,
    'mouseOutAction': mouseOut
  });

<script src="https://www.gstatic.com/jsaction/contract.js"></script>
<script src="https://www.gstatic.com/jsaction/dispatcher.js" ></script>

<div id="container">
  <div id="foo" jsaction="click:leftNav.clickAction;mouseover:leftNav.mouseOverAction;mouseout:leftNav.mouseOutAction">
    some content here
  </div>
</div>

这里是jsaction中的complete list事件，其中大多数是css事件。