如何添加事件侦听器突出显示按钮锁定

Question

我想添加事件侦听器突出显示按钮使用堆栈模板锁定。你能指导使用它吗？谢谢

Answer 1

TVJS 中的事件系统与 Web 浏览器中的事件系统非常相似。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);