如何添加 eventListener 高亮 buttonLockup？答案

【问题标题】：How to add eventListener highlight buttonLockup?如何添加 eventListener 高亮 buttonLockup？
【发布时间】：2016-02-04 04:14:58
【问题描述】：

我想用 stackTemplate 添加 eventListener 高亮 buttonLockup。你能指导使用这个吗？谢谢，

【问题讨论】：

在构建 TVML 时使用按钮发布示例。

标签： tvos tvml tvjs

【解决方案1】：

TVJS 中的事件系统与 Web 浏览器中的事件系统极为相似。毕竟，它只是 JS 和一个 DOM。 MDN's documentation on Event Handlers 应该是最相关的

要将事件侦听器添加到特定按钮，只需找到该按钮（使用 ID 或名称等），然后使用 addEventListener。

var myButton = doc.getElementByName('buttonLockup')
var onSelect = function(ev) {
  console.log('Button selected!')
}
myButton.addEventListener('select', onSelect)

但是，根据您的用例，我发现Apple's approach in their sample apps 非常有用。他们依赖于事件冒泡到模板的根部这一事实，并在那里聆听它们。比如：

// Given a TVML document has been presented with this somewhere in it
<buttonLockup action="doSomething">Do something</buttonLockup>

// When it's selected, doSomething
var globalOnSelect = function(ev) {
  var target = ev.target;
  var action = target.getAttribute('action')

  if (action === 'doSomething') {
    console.log('Do Something button selected');
    doSomething();
  }
}

doc.addEventListener('select', globalOnSelect);

【讨论】：