tvos - 如何添加 eventListener 高亮 buttonLockup？

Question

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

Answer 1

TVJS 中的事件系统与 Web 浏览器中的事件系统极为相似。毕竟，它只是 JS 和一个 DOM。MDN 关于事件处理程序的文档应该是最相关的

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

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

但是，根据您的用例，我发现Apple 在其示例应用程序中的方法非常有用。他们依赖于事件冒泡到模板的根部这一事实，并在那里聆听它们。例如：

// 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);