CODEWITHSUNDEEP
cordovaonsen-ui
morrisstu
morrisstu

Reputation: 99

OnsenUI button DOM events

I've recently started trying out OnsenUI as an alternative to Jquery for a mobile app and was wondering what the equivalant way to correspond a button press with an action. https://onsen.io/guide/overview.html#EventHandling seems to suggest there's an identical way in the component DOM events section.

For example using Jquery I'd use the touchend event to do something

On the HTML page I'd create the button

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

And within the app.js file I'd associate what do to

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

Onsen Trial method

Again create the button and using the onclick handler

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

doSomething() being an associated action within the .js file, afterwards however is where it gets hazey.

Upvotes: 1

Views: 505

Answers (1)

Fran Dios
Fran Dios

Reputation: 3482

Onsen UI as a framework is not equivalent to jQuery. You could rather compare it with jQuery Mobile if you want. Thus, you can use Onsen UI and jQuery together without problem. I personally prefer Vanilla JavaScript instead:

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

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

Or:

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

Onsen UI 2.0 does not rely on AngularJS internally anymore so you don't need to worry about it.

Upvotes: 2

Related Questions