The Region.bind() method allows you to attach gesture listeners to DOM elements. There are two primary ways to use this method:
- Direct Binding: Pass the element, a gesture key (string) or instance, and a handler function. This is useful for specific, one-off bindings.
- Chainable Binding: Pass only the element. This returns a chainable object that allows you to call gesture methods (like
.tap(), .swipe(), etc.) directly. This is often cleaner for multiple bindings on the same element.
Important Performance Note: When using custom gesture instances, reuse the gesture object instead of creating a new one inside a loop to avoid memory overhead and performance degradation.
Event Data: The handler function receives a CustomEvent. All gesture-specific data is located in event.detail.
// Example 1: Direct binding with a gesture key
var myRegion = new ZingTouch.Region(document.body);
var myElement = document.getElementById('some-div');
myRegion.bind(myElement, 'tap', function(e) {
console.log('Tap gesture emitted: ' + e.detail.interval);
});
// Example 2: Direct binding with a custom gesture instance
var myElement = document.getElementById('some-div');
var myTapGesture = new ZingTouch.Tap({ maxDelay : 100 });
var myRegion = new ZingTouch.Region(document.body);
myRegion.bind(myElement, myTapGesture, function(e) {
console.log('Custom Tap gesture emitted: ' + e.detail.interval);
}, false);
// Example 3: Chainable binding
var myElement = document.getElementById('mydiv');
var myRegion = new ZingTouch.Region(myElement);
var chainableObject = myRegion.bind(myElement);
chainableObject
.tap(function(e){
console.log(e.detail);
})
.swipe(function(e){
console.log(e.detail);
}, true);
