OnsenUI 按钮 DOM 事件

Posted 2023-03-14

【中文标题】OnsenUI 按钮 DOM 事件

【英文标题】：OnsenUI button DOM events

【发布时间】：2016-03-09 14:50:43

【问题描述】：

我最近开始尝试使用 OnsenUI 作为移动应用程序的 Jquery 的替代品，并且想知道将按钮按下与操作对应的等效方式是什么。 https://onsen.io/guide/overview.html#EventHandling 似乎暗示在组件 DOM 事件部分中存在相同的方式。

例如使用 Jquery，我会使用 touchend 事件来做某事

在 HTML 页面上创建按钮

 <button id="button">Do this</button>

在 app.js 文件中，我会关联要做什么

  $(document).on("touchend", "#button", function(e) 
    e.preventDefault();
    //do some action
    doSomething();
);

温泉体验法

再次创建按钮并使用 onclick 处理程序

<ons-button modifier="material" onclick="doSomething()">
    Start                    
</ons-button>

doSomething() 是 .js 文件中的关联操作，但之后它变得模糊不清。

【问题讨论】：

也许这个问题会有所帮助 ***.com/questions/24032225/… 从未使用过 onsen-ui 但它看起来像使用 angularjs 所以查看 angularjs 控制器，您将在其中定义 doSomething() 函数

@Will.Harris，很棒的提示。我已经设法解决了，实际上发现它更容易理解！虽然它导致了一个我没有预料到的更大的问题，典型的......

【参考方案1】：

Onsen UI 作为一个框架并不等同于 jQuery。如果您愿意，您可以将其与 jQuery Mobile 进行比较。因此，您可以毫无问题地同时使用 Onsen UI 和 jQuery。我个人更喜欢 Vanilla javascript：

<ons-button id="myButton">Do this</ons-button>

document.querySelector('#myButton').onclick = function(event) 
  doSomething();
;

或者：

docment.addEventListener('click', function(event) 
  if (event.target.id === 'myButton'
  doSomething();
);

Onsen UI 2.0 内部不再依赖 AngularJS，因此您无需担心。

【讨论】：

感谢 Fran 提供的信息，我一定会牢记这些要点。