MUI Event Management

1. Event binding

In addition to using the AddEventListener () method to listen for events on a particular element, you can use the. On () method to implement event binding for bulk elements.

. On (event, selector, handler)

Event:Type:String, the name of the event to listen to, for example: ' Tap '

Selector:Type:String, Selector

Handler:Type:Function (Event event), which is the callback function that is triggered by events, and the event details can be obtained through the callback.

Example: Click on the news list to get the current list item's ID , and put the ID Pass to the News details page, then open the News details page

MUI (". Mui-table-view"). On (' Tap ', '. Mui-table-view-cell ', function () {  //Get ID  var id = this.getattribute ("id" );  Pass value to the detail page, notify loading new data  mui.fire (detail, ' Getdetail ', {id:id});  Open News Details  Mui.openwindow ({    id: ' Detail ',    URL: ' detail.html '  });})

code block activation character: Mmon

2. Event Cancellation

After binding an event using the On () method, you can use the off () method if you want to unbind. The off () method has different implementation logic depending on the parameters passed in.

(1),. Off (event, selector, handler)

Event:Type:String, you need to unbind the event name, for example: ' Tap '

Selector:Type:String, Selector

Handler:Type:Function, previously bound to an event function on this element, does not support anonymous functions

(2),. Off (event, selector)

Event:Type:String, you need to unbind the event name, for example: ' Tap '

Selector:Type:String, Selector

(3),. Off (event)

Event:Type:String, you need to unbind the event name, for example: ' Tap '

(4),. Off ()

Null parameter, delete all events on this element

Example

off (Event,selector,handle) is useful for canceling specific callbacks that are performed on a particular event in the corresponding selector, such as:

When you click Li, the Foo_1 function mui ("#list") is executed. On ("Tap", "Li", foo_1);//When you click Li, the Foo_2 function mui ("#list") is executed. On ("Tap", "Li", foo_2); function Foo_1 () {  console.log ("foo_1 execute");} function Foo_2 () {  console.log ("foo_2 execute");} When you click Li, the Foo_1 function is no longer executed, but the Foo_2 function mui ("#list") continues to execute. Off ("Tap", "Li", foo_1);

Off (Event,selector) is used to cancel all callbacks for a specific event on the selector.

When you click Li, the Foo_1 function mui ("#list") is executed. On ("Tap", "Li", foo_1);//When you click Li, the Foo_2 function mui ("#list") is executed. On ("Tap", "Li", foo_2); function Foo_1 () {  console.log ("foo_1 execute");} function Foo_2 () {  console.log ("foo_2 execute");} When you click Li, the foo_2, foo_2 two functions no longer perform MUI ("#list"). Off ("Tap", "Li");

Off applies to all callbacks that cancel a specific event bound on the current element

When you click Li, the Foo_1 function mui ("#list") is executed. On ("Tap", "Li", foo_1);//click P to execute the Foo_3 function mui ("#list"). On ("Tap", "P", foo_3); function Foo_1 () {  console.log ("foo_1 execute");} function Foo_3 () {  console.log ("Foo_3 execute");} When you click on Li, the Foo_1 function is no longer executed, and when you click P, the Foo_3 function mui ("#list") is no longer executed. Off ("tap");

Off () applies to canceling all event callbacks bound on the current element

When you click Li, the Foo_1 function mui ("#list") is executed. On ("Tap", "Li", foo_1);//When you double-click Li, the Foo_4 function mui ("#list") is executed. On ("Doubletap", "Li", foo_4);// When you click P, the Foo_3 function mui ("#list") is executed. On ("Tap", "P", foo_3), function foo_1 () {  console.log ("foo_1 execute");} function Foo_3 () {  console.log ("Foo_3 execute");} function Foo_4 () {  console.log ("Foo_4 execute");} When you click on Li, the Foo_1 function is no longer executed, the Foo_3 function is no longer executed when you click P, and when you double-click Li, the Foo_4 function is no longer executed; MUI ("#list"). Off ();

code block activation character: Mmoff

  3. Event triggering

Use the Mui.trigger () method to dynamically trigger events on a particular DOM element.

. Trigger (element, event, data)

Element:Type:Element, the DOM element that triggers the event

Event:Type:String, event name, for example: ' Tap ', ' swipeleft '

Data:Type:Object, business parameters that need to be passed to the event

Example

Auto-Trigger button click event:

var btn = document.getElementById ("submit");//Monitor Click event Btn.addeventlistener ("Tap", function () {  Console.log ("Tap Event Trigger ");}); /Trigger the Submit button click event Mui.trigger (BTN, ' tap ');

Events that are monitored by some MUI controls cannot be triggered by mui.trigger, such as the ability to automatically trigger the MUI return icon to close the current page, which is being optimized

code block activation character: Mtrigger

4. Gesture Events

In the development of mobile applications, there will be a lot of gesture operations, such as sliding, long-press and so on, in order to facilitate the quick integration of these gestures, MUI built-in common gesture events, the currently supported gesture events see the following list:

(1), gesture event configuration

Depending on the frequency of use, the MUI will listen to some gesture events, such as Click and swipe events, by default, in order to develop a higher performance moble App,mui to enable the user to configure the specific gesture events to be monitored by the gestureconfig parameters in the Mui.init method based on the actual business requirements.

Mui.init ({  gestureconfig:{   tap:true,//default = True   doubletap:true,//default = False   Longtap:true,// The default is False   Swipe:true,//default is True   drag:true,//default is True   hold:false,//default is False, no listening   release:false// The default is false, not listening  }});

Note: DragStart, drag, dragend shared drag switch, Swipeleft, Swiperight, swipeup, Swipedown common swipe switch

(2), event monitoring

An event listener on a single element, directly using AddEventListener (), is as follows:

Elem.addeventlistener ("Swipeleft", function () {     Console.log ("You are sliding to the left");});

If more than one element performs the same logic, it is recommended to use event binding (on ()).

code block activation character: minitgesture

5. Custom Events

In app development, you often encounter the need to transfer values between pages, such as from the News list page to the details page, the news ID needs to pass through; The Html5plus specification designs the Evaljs method to solve the problem, but the Evaljs method only receives the string parameter, when it involves more than one parameter. Requires a developer to manually spell the string; To simplify development, the MUI framework encapsulates custom events based on the Evaljs method, with custom events that allow users to easily implement data transfer across multiple webview. Can only be used in 5+ apps and streaming apps. Because it is multi-webview between the value, it can not be used in mobile browser, in;

(1), listening to custom events

Adding a custom event listener is similar to the standard JS event listener, which can be added directly through the Window object as follows:

Window.addeventlistener (' Customevent ', function (event) {  ///through Event.detail can get the parameter content passed over ...  });

(2), triggering custom events

The custom event of the target window can be triggered by the Mui.fire () method:

. Fire (target, event, data)

Target:Type:WebviewObject, the target of the value to be transmitted WebView

Event:Type:String, custom event name

Data:type:json,json formatted data

The loaded event must be triggered before the custom event can be used by the target webview. If a new webview is created, it may not be valid to use WEBVIEW.EVALJS () or Mui.fire (WebView, ' EventName ', {}) immediately if the WebView loaded event occurs;

Webview.addeventlistener (' Loaded ', function () {    webview.show (' None ', 1, function () {        console.log (1221);        Webview.evaljs ("Test ()");        Mui.fire (WebView, ' Pageshow ', {});    })

(3), example

Assume the following scenario: From the News list page into the News details page, the News details page for the common page, by passing the News ID Notification Detail page needs to show the specific news, detail page and then dynamically request data to the server, MUI to achieve similar requirements can be achieved by the following steps:

A. Pre-load the detail page in the list page (assuming detail.html)

b, the list page when clicking on the news title, first, get the news ID, trigger the NewSID event of the detail page, and pass the news ID as the event parameter, and then open the details page;

C, Detail page monitoring NewSID custom events

The list page code is as follows:

Initialize pre-load Details page mui.init ({  preloadpages:[{    ID: ' detail.html ',    URL: ' detail.html '             }  ]}); var Detailpage = null;//The Click event mui ('. Mui-content ') of the added list item. On (' Tap ', ' a ', function (e) {  var id = this.getattribute (' id ');  Get the Details page  if (!detailpage) {    detailpage = plus.webview.getWebviewById (' detail.html ');  }  Trigger the details page of the NewsId event  Mui.fire (detailpage, ' newsId ', {    id:id  });//Open the Details page            Mui.openwindow ({    ID: ' detail.html '  });

The details page code is as follows:

Add NEWID custom Event listener window.addeventlistener (' NewsId ', function (event) {  //Get event parameter  var id = event.detail.id;  Request news details from the server by id ...  });

code block activation character: MFire

MUI Event Management